core-frontmatter.md - slidev

core-frontmatter.md

1	---
2	name: frontmatter
3	description: Configuration options for individual slides
4	---
5
6	# Per-Slide Frontmatter
7
8	Configuration options for individual slides.
9
10	## Layout
11
12	```yaml
13	---
14	layout: center
15	---
16	```
17
18	Available layouts: `default`, `cover`, `center`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`, `quote`, `section`, `statement`, `fact`, `full`, `intro`, `end`, `none`
19
20	## Background
21
22	```yaml
23	---
24	background: /image.jpg
25	backgroundSize: cover
26	class: text-white
27	---
28	```
29
30	## Click Count
31
32	```yaml
33	---
34	clicks: 5 # Total clicks for this slide
35	clicksStart: 0 # Starting click number
36	---
37	```
38
39	## Transitions
40
41	```yaml
42	---
43	transition: fade # Slide transition
44	---
45	```
46
47	Or different for forward/backward:
48
49	```yaml
50	---
51	transition: slide-left \| slide-right
52	---
53	```
54
55	## Zoom
56
57	```yaml
58	---
59	zoom: 0.8 # Scale content (0.8 = 80%)
60	---
61	```
62
63	## Hide Slide
64
65	```yaml
66	---
67	disabled: true # Hide this slide
68	# or
69	hide: true
70	---
71	```
72
73	## Table of Contents
74
75	```yaml
76	---
77	hideInToc: true # Hide from Toc component
78	level: 2 # Override heading level
79	title: Custom Title # Override slide title
80	---
81	```
82
83	## Import External File
84
85	```yaml
86	---
87	src: ./slides/intro.md # Import markdown file
88	---
89	```
90
91	With specific slides:
92
93	```yaml
94	---
95	src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7
96	---
97	```
98
99	## Route Alias
100
101	```yaml
102	---
103	routeAlias: intro # URL: /intro instead of /1
104	---
105	```
106
107	## Preload
108
109	```yaml
110	---
111	preload: false # Don't mount until entering
112	---
113	```
114
115	## Draggable Positions
116
117	```yaml
118	---
119	dragPos:
120	logo: 100,50,200,100,0 # Left,Top,Width,Height,Rotate
121	arrow: 300,200,50,50,45
122	---
123	```
124
125	## Image Layouts
126
127	```yaml
128	---
129	layout: image-left
130	image: /photo.jpg
131	backgroundSize: contain
132	class: my-custom-class
133	---
134	```
135
136	## Iframe Layouts
137
138	```yaml
139	---
140	layout: iframe
141	url: https://example.com
142	---
143	```
144
145	## Two Columns
146
147	```yaml
148	---
149	layout: two-cols
150	---
151
152	# Left Side
153
154	Content
155
156	::right::
157
158	# Right Side
159
160	Content
161	```
162
163	## Two Columns with Header
164
165	```yaml
166	---
167	layout: two-cols-header
168	---
169
170	# Header
171
172	::left::
173
174	Left content
175
176	::right::
177
178	Right content
179	```
180
181	## Full Example
182
183	```yaml
184	---
185	layout: center
186	background: /bg.jpg
187	class: text-white text-center
188	transition: fade
189	clicks: 3
190	zoom: 0.9
191	hideInToc: false
192	---
193
194	# Slide Content
195	```
196

196 lines MARKDOWN