Skip to content

Commit 3bffacf

Browse files
QC-LQC-L
authored
docs(en): merge docs/main into docs-cn/main @ 953ee56 
2 parents b720304 + 202b975 commit 3bffacf

File tree

8 files changed

+157
-33
lines changed

8 files changed

+157
-33
lines changed

‎.vitepress/config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ const Guide = [
4141
text: '编辑器整合',
4242
link: '/guide/editors',
4343
},
44+
{
45+
text: 'FAQ',
46+
link: '/guide/faq',
47+
},
4448
]
4549

4650
const Theme = [

‎custom/directory-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ your-slidev/
2525

2626
## 组件 {#components}
2727

28-
约定：`./components/*.{vue,js,ts,jsx,tsx}`
28+
约定：`./components/*.{vue,js,ts,jsx,tsx,md}`
2929

3030
此目录中的组件可以在幻灯片的 Markdown 中直接使用，其组件名与文件名相同。
3131

‎guide/faq.md

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# FAQ
2+
3+
## Grids
4+
5+
Since Slidev is based on the Web, you can apply any grid layouts as you want. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), or even [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), you get the full controls.
6+
7+
Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference:
8+
9+
```html
10+
<div class="grid grid-cols-2 gap-4">
11+
<div>
12+
13+
The first column
14+
15+
</div>
16+
<div>
17+
18+
The second column
19+
20+
</div>
21+
</div>
22+
```
23+
24+
Go further, you can customize the size of each columns like:
25+
26+
```html
27+
<div class="grid grid-cols-[200px,1fr,10%] gap-4">
28+
<div>
29+
30+
The first column (200px)
31+
32+
</div>
33+
<div>
34+
35+
The second column (auto fit)
36+
37+
</div>
38+
<div>
39+
40+
The third column (10% width to parent container)
41+
42+
</div>
43+
</div>
44+
```
45+
46+
Learn more about [Windi CSS Grids](https://windicss.org/utilities/grid.html).
47+
48+
## Positioning
49+
50+
Slides are defined in fixed sizes (default `980x552px`) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.
51+
52+
For example:
53+
54+
```html
55+
<div class="absolute left-30px bottom-30px">
56+
This is a left-bottom aligned footer
57+
</div>
58+
```
59+
60+
To change the canvas' actual size, you can pass the `canvasWidth` options in your first frontmatter:
61+
62+
```yaml
63+
---
64+
canvasWidth: 800
65+
---
66+
```
67+
68+
## Font Size
69+
70+
If you feel the font size in your slides are too small, you can adjust it in a few ways:
71+
72+
### Override Local Style
73+
74+
You can override styles for each slide with the inlined `<style>` tag.
75+
76+
```md
77+
# Page 1
78+
79+
<style>
80+
h1 {
81+
font-size: 10em;
82+
}
83+
</style>
84+
85+
---
86+
87+
# Page 2
88+
89+
This will not be affected.
90+
```
91+
92+
Learn more: [Embedded Styles](/guide/syntax.html#embedded-styles)
93+
94+
### Override Global Style
95+
96+
You can provide custom global styles by creating `./style.css`, for example
97+
98+
```css
99+
/* style.css */
100+
101+
h1 {
102+
font-size: 10em !important;
103+
}
104+
```
105+
106+
Learn more: [Global Style](/custom/directory-structure.html#style)
107+
108+
### Scale the Canvas
109+
110+
Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides
111+
112+
```yaml
113+
---
114+
# default: 980
115+
# since the canvas gets smaller, the visual size will become larger
116+
canvasWidth: 800
117+
---
118+
```

‎guide/install.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ $ npm init slidev@latest
1919
使用 Yarn：
2020

2121
```bash
22-
$ yarn create slidev@latest
22+
$ yarn create slidev
2323
```
2424

2525
跟随命令行的提示，它将自动为你打开幻灯片，网址是 http://localhost:3030/。

‎guide/why.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,6 @@ $ npm init slidev
7070

7171
或者你也可以通过下方的视频进行快速预览:
7272

73-
<iframe width="560" height="315" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
73+
<div class="aspect-9/16 relative">
74+
<iframe class="rounded w-full shadow-md border-none" src="https://www.youtube.com/embed/eW7v-2ZKZOU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
75+
</div>

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
"postinstall": "node .vitepress/scripts/prepare.js"
77
},
88
"devDependencies": {
9-
"@iconify/json": "^1.1.346",
10-
"@slidev/client": "^0.13.0",
11-
"@slidev/parser": "^0.13.0",
9+
"@iconify/json": "^1.1.347",
10+
"@slidev/client": "^0.13.4",
11+
"@slidev/parser": "^0.13.4",
1212
"@slidev/theme-default": "^0.7.4",
13-
"@slidev/types": "^0.13.0",
13+
"@slidev/types": "^0.13.4",
1414
"@types/fs-extra": "^9.0.11",
1515
"@types/node": "^15.6.0",
1616
"fs-extra": "^10.0.0",

‎pnpm-lock.yaml

Lines changed: 25 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎windi.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import aspectRatio from 'windicss/plugin/aspect-ratio'
44
export default defineConfig({
55
extract: {
66
include: [
7-
// '**/*.{md}',
7+
'**/*.md',
88
'.vitepress/theme/**/*.{md,vue}',
99
'.vitepress/@slidev/client/internals/SlideContainer.vue',
1010
'.vitepress/@slidev/client/layouts/*.vue',

0 commit comments

Comments
 (0)