返回 Pixelle-Video
templates.md
根目录 / docs / en / user-guide / templates.md
1 # Template Development
2
3 How to create custom video templates.
4
5 ---
6
7 ## Template Introduction
8
9 Video templates use HTML to define the layout and style of video frames. Pixelle-Video provides multiple preset templates covering different video dimensions and style requirements.
10
11 ---
12
13 ## Built-in Template Preview
14
15 ### Portrait Templates (1080x1920)
16
17 Suitable for TikTok, Kuaishou, Xiaohongshu, and other short video platforms.
18
19 <div class="grid cards" markdown>
20
21 - **static_default**
22
23 ---
24
25 ![static_default](../../images/1080x1920/static_default_en.jpg)
26
27 Default static template
28
29 - **static_excerpt**
30
31 ---
32
33 ![static_excerpt](../../images/1080x1920/static_excerpt_en.jpg)
34
35 Text excerpt static template
36
37 - **Blur Card**
38
39 ---
40
41 ![blur_card](../../images/1080x1920/image_blur_card_en.jpg)
42
43 Blurred background card style, suitable for graphic content display
44
45 - **Cartoon**
46
47 ---
48
49 ![cartoon](../../images/1080x1920/image_cartoon_en.jpg)
50
51 Cartoon style, suitable for light and lively content
52
53 - **Default**
54
55 ---
56
57 ![default](../../images/1080x1920/image_default_en.jpg)
58
59 Default template, simple and versatile
60
61 - **Elegant**
62
63 ---
64
65 ![elegant](../../images/1080x1920/image_elegant_en.jpg)
66
67 Elegant style, suitable for artistic and intellectual content
68
69 - **Fashion Vintage**
70
71 ---
72
73 ![fashion_vintage](../../images/1080x1920/image_fashion_vintage_en.jpg)
74
75 Retro fashion style, suitable for nostalgic themes
76
77 - **Life Insights**
78
79 ---
80
81 ![life_insights](../../images/1080x1920/image_life_insights_en.jpg)
82
83 Life insight style, suitable for inspirational content
84
85 - **Modern**
86
87 ---
88
89 ![modern](../../images/1080x1920/image_modern_en.jpg)
90
91 Modern minimalist style, suitable for business and tech content
92
93 - **Neon**
94
95 ---
96
97 ![neon](../../images/1080x1920/image_neon_en.jpg)
98
99 Neon style, suitable for fashion and trendy content
100
101 - **Psychology Card**
102
103 ---
104
105 ![psychology_card](../../images/1080x1920/image_psychology_card_en.jpg)
106
107 Psychology card style, suitable for knowledge popularization
108
109 - **Purple**
110
111 ---
112
113 ![purple](../../images/1080x1920/image_purple_en.jpg)
114
115 Purple theme, suitable for dreamy and mysterious styles
116
117 - **Satirical Cartoon**
118
119 ---
120
121 ![satirical_cartoon](../../images/1080x1920/image_satirical_cartoon_en.jpg)
122
123 80s satirical cartoon style for spiritual tales
124
125 - **Simple Black Background**
126
127 ---
128
129 ![simple_black](../../images/1080x1920/image_simple_black_en.jpg)
130
131 Simple black background, suitable for inspirational content
132
133 - **Simple Line Drawing**
134
135 ---
136
137 ![simple_line_drawing](../../images/1080x1920/image_simple_line_drawing_en.jpg)
138
139 Simple line drawing style for cognitive growth content
140
141 - **Book**
142
143 ---
144
145 ![book](../../images/1080x1920/image_book_en.jpg)
146
147 Book style, suitable for book lists
148
149 - **Long Text**
150
151 ---
152
153 ![long_text](../../images/1080x1920/image_long_text_en.jpg)
154
155 Long text style, suitable for inspirational content
156
157 - **Excerpt**
158
159 ---
160
161 ![excerpt](../../images/1080x1920/image_excerpt_en.jpg)
162
163 Excerpt style, suitable for quotes and book excerpts
164
165 - **Health Preservation**
166
167 ---
168
169 ![health_preservation](../../images/1080x1920/image_health_preservation_en.jpg)
170
171 Health preserving tips, suitable for wellness explainers.
172
173 - **Life Insights**
174
175 ---
176
177 ![life_insights_light](../../images/1080x1920/image_life_insights_light_en.jpg)
178
179 Life insights, conveying warmth and strength
180
181 - **Full**
182
183 ---
184
185 ![full](../../images/1080x1920/image_full_en.jpg)
186
187 Full screen display, suitable for book lists
188
189 - **Healing**
190
191 ---
192
193 ![healing](../../images/1080x1920/image_healing_en.jpg)
194
195 Healing style, suitable for therapeutic content
196
197 - **Video_Default**
198
199 ---
200
201 ![video_default](../../images/1080x1920/video_default.jpg)
202
203 Default dynamic template
204
205 - **Video_Healing**
206
207 ---
208
209 ![video_healing](../../images/1080x1920/video_healing.jpg)
210
211 Healing dynamic template
212
213 </div>
214
215 ---
216
217 ### Landscape Templates (1920x1080)
218
219 Suitable for YouTube, Bilibili, and other video platforms.
220
221 <div class="grid cards" markdown>
222
223 - **Ultrawide Minimal**
224
225 ---
226
227 ![ultrawide_minimal](../../images/1920x1080/image_ultrawide_minimal_en.jpg)
228
229 Ultrawide minimalist style, suitable for desktop viewing
230
231 - **Wide Darktech**
232
233 ---
234
235 ![wide_darktech](../../images/1920x1080/image_wide_darktech_en.jpg)
236
237 Dark tech style, suitable for technology and gaming content
238
239 - **Film**
240
241 ---
242
243 ![film](../../images/1920x1080/image_film_en.jpg)
244
245 Film style, immersive experience
246
247 - **Full**
248
249 ---
250
251 ![full](../../images/1920x1080/image_full_en.jpg)
252
253 Full screen display, suitable for book lists
254
255 - **Book**
256
257 ---
258
259 ![book](../../images/1920x1080/image_book_en.jpg)
260
261 Book style, suitable for book lists
262
263 </div>
264
265 ---
266
267 ### Square Templates (1080x1080)
268
269 Suitable for Instagram, WeChat Moments, and other platforms.
270
271 <div class="grid cards" markdown>
272
273 - **Minimal Framed**
274
275 ---
276
277 ![minimal_framed](../../images/1080x1080/image_minimal_framed_en.jpg)
278
279 Minimalist framed style, suitable for social media sharing
280
281 </div>
282
283 ---
284
285 ## Template Naming Convention
286
287 Templates follow a unified naming convention to distinguish different types:
288
289 - **`static_*.html`**: Static templates
290 - No AI-generated media content required
291 - Pure text style rendering
292 - Suitable for quick generation and low-cost scenarios
293
294 - **`image_*.html`**: Image templates
295 - Uses AI-generated images as background
296 - Invokes ComfyUI image generation workflows
297 - Suitable for content requiring visual illustrations
298
299 - **`video_*.html`**: Video templates
300 - Uses AI-generated videos as background
301 - Invokes ComfyUI video generation workflows
302 - Creates dynamic video content with enhanced expressiveness
303
304 ## Template Structure
305
306 Templates are located in the `templates/` directory, grouped by size:
307
308 ```
309 templates/
310 ├── 1080x1920/ # Portrait
311 │ ├── static_*.html # Static templates
312 │ ├── image_*.html # Image templates
313 │ └── video_*.html # Video templates
314 ├── 1920x1080/ # Landscape
315 │ └── image_*.html # Image templates
316 └── 1080x1080/ # Square
317 └── image_*.html # Image templates
318 ```
319
320 ---
321
322 ## Creating Custom Templates
323
324 ### Steps
325
326 1. Copy an existing template file from the `templates/` directory
327 2. Modify HTML and CSS styles
328 3. Save to the corresponding size directory with `.html` extension
329 4. Use the new template name in configuration or Web interface
330
331 ### Template Variables
332
333 Templates support the following Jinja2 variables:
334
335 - `{{ title }}` - Video title (optional)
336 - `{{ text }}` - Current scene text content
337 - `{{ image }}` - Current scene image (if any)
338
339 ### Example Template
340
341 ```html
342 <!DOCTYPE html>
343 <html>
344 <head>
345 <style>
346 body {
347 width: 1080px;
348 height: 1920px;
349 margin: 0;
350 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
351 display: flex;
352 align-items: center;
353 justify-content: center;
354 font-family: 'Arial', sans-serif;
355 }
356 .content {
357 text-align: center;
358 color: white;
359 padding: 40px;
360 }
361 .text {
362 font-size: 48px;
363 line-height: 1.6;
364 }
365 </style>
366 </head>
367 <body>
368 <div class="content">
369 <div class="text">{{ text }}</div>
370 </div>
371 </body>
372 </html>
373 ```
374
375 ---
376
377 ## Template Development Tips
378
379 ### 1. Responsive Sizing
380
381 Ensure the template's `body` size matches the target video dimensions:
382
383 - Portrait: `width: 1080px; height: 1920px;`
384 - Landscape: `width: 1920px; height: 1080px;`
385 - Square: `width: 1080px; height: 1080px;`
386
387 ### 2. Text Typography
388
389 - Use appropriate font sizes and line heights for readability
390 - Add shadows or backgrounds to text for better contrast
391 - Control text length to avoid overflow
392
393 ### 3. Image Handling
394
395 - Use `object-fit: cover` to ensure image filling
396 - Add gradients or overlay layers to improve text readability
397 - Consider fallback solutions for image loading failures
398
399 ### 4. Performance Optimization
400
401 - Avoid overly complex CSS animations
402 - Optimize background image sizes
403 - Use system fonts or web-safe fonts
404
405 ---
406
407 ## More Information
408
409 For template development questions, feel free to ask in [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues).
410
411
411 lines MARKDOWN