返回 slidev
faq.md
根目录 / docs / guide / faq.md
1 ---
2 outline: deep
3 ---
4
5 # FAQ
6
7 ## Assets Handling {#assets-handling}
8
9 You may use static assets like images and videos in your slides. Since Slidev is based on Vite, you can import them directly in your markdown files.
10
11 URLs that can be statically analyzed as assets can use relative paths:
12
13 ```md
14 ![alt](./image.png)
15 <img src="./image.png" />
16 ```
17
18 In the above case, the URLs will be resolved to `/BASE_URL/assets/image.png` after build.
19
20 However, relative paths in frontmatter and other components will be broken after build:
21
22 ```md
23 ---
24 background: ./image.png # Broken after build
25 ---
26
27 <Comp src="./image.png" />
28 ```
29
30 In the above case, the URLs are not statically analyzable and will be preserved as-is, which will result in 404 errors after build.
31
32 To solve this, you can place these assets in the [public folder](../custom/directory-structure#public) and use an absolute path to import them:
33
34 ```md
35 ---
36 background: /image.png
37 ---
38
39 <Comp src="/image.png" />
40 ```
41
42 For more details, refer to [Vite's documentation](https://vitejs.dev/guide/assets.html).
43
44 ## Positioning {#positioning}
45
46 Since Slidev is web-based, CSS is the primary way to position elements. Here are some useful tips for position elements:
47
48 ### Grids And Flexboxes
49
50 You can use CSS Grids to create complex layouts:
51
52 ::: code-group
53
54 ```md [Two columns]
55 <div class="grid grid-cols-2 gap-4">
56 <div>
57 The first column
58 </div>
59 <div>
60 The second column
61 </div>
62 </div>
63 ```
64
65 ```md [Complex case]
66 <div class="grid grid-cols-[200px_1fr_10%] gap-4">
67 <div>
68 The first column (200px)
69 </div>
70 <div>
71 The second column (auto fit)
72 </div>
73 <div>
74 The third column (10% width to parent container)
75 </div>
76 </div>
77 ```
78
79 :::
80
81 And use Flexboxes to create more responsive layouts:
82
83 ::: code-group
84
85 ```md [Horizontal]
86 <div class="flex items-center">
87 <div>
88 First block
89 </div>
90 <div>
91 Second block
92 </div>
93 </div>
94 ```
95
96 ```md [Vertical]
97 <div class="flex flex-col items-center">
98 <div>
99 Centered content
100 </div>
101 </div>
102 ```
103
104 :::
105
106 Learn more: [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/).
107
108 ### Absolute Position
109
110 You can use UnoCSS to position elements absolutely:
111
112 ```md
113 <div class="absolute left-30px bottom-30px">
114 This is a left-bottom aligned footer
115 </div>
116 ```
117
118 Or use the draggable elements feature:
119
120 <LinkCard link="features/draggable" />
121
122 ## Adjust Sizes {#adjust-size}
123
124 - Adjust all slides's size:
125
126 <LinkCard link="features/canvas-size" />
127
128 - Adjust several slides' size:
129
130 <LinkCard link="features/zoom-slide" />
131
132 - Adjust some elements' size:
133
134 <LinkCard link="features/transform-component" />
135
135 lines MARKDOWN