templates.md - Pixelle-Video

templates.md

1	# 模板开发
2
3	如何创建自定义视频模板。
4
5	---
6
7	## 模板简介
8
9	视频模板使用 HTML 定义视频画面的布局和样式。Pixelle-Video 提供了多种预设模板，覆盖不同的视频尺寸和风格需求。
10
11	---
12
13	## 内置模板预览
14
15	### 竖屏模板 (1080x1920)
16
17	适用于抖音、快手、小红书等短视频平台。
18
19	<div class="grid cards" markdown>
20
21	- static_default
22
23	---
24
25	![static_default](../../images/1080x1920/static_default.jpg)
26
27	默认静态模板
28
29	- static_excerpt
30
31	---
32
33	![static_excerpt](../../images/1080x1920/static_excerpt.jpg)
34
35	图文摘抄静态模板
36
37	- Blur Card
38
39	---
40
41	![blur_card](../../images/1080x1920/image_blur_card.png)
42
43	模糊背景卡片风格，适合图文内容展示
44
45	- Cartoon
46
47	---
48
49	![cartoon](../../images/1080x1920/image_cartoon.png)
50
51	卡通风格，适合轻松活泼的内容
52
53	- Default
54
55	---
56
57	![default](../../images/1080x1920/image_default.jpg)
58
59	默认模板，简洁通用
60
61	- Elegant
62
63	---
64
65	![elegant](../../images/1080x1920/image_elegant.jpg)
66
67	优雅风格，适合文艺、知性内容
68
69	- Fashion Vintage
70
71	---
72
73	![fashion_vintage](../../images/1080x1920/image_fashion_vintage.jpg)
74
75	复古时尚风格，适合怀旧主题
76
77	- Life Insights
78
79	---
80
81	![life_insights](../../images/1080x1920/image_life_insights.jpg)
82
83	生活感悟风格，适合心灵鸡汤类内容
84
85	- Modern
86
87	---
88
89	![modern](../../images/1080x1920/image_modern.jpg)
90
91	现代简约风格，适合商务、科技内容
92
93	- Neon
94
95	---
96
97	![neon](../../images/1080x1920/image_neon.jpg)
98
99	霓虹灯风格，适合时尚、潮流内容
100
101	- Psychology Card
102
103	---
104
105	![psychology_card](../../images/1080x1920/image_psychology_card.jpg)
106
107	心理学卡片风格，适合知识科普
108
109	- Purple
110
111	---
112
113	![purple](../../images/1080x1920/image_purple.jpg)
114
115	紫色主题，适合梦幻、神秘风格
116
117	- Satirical Cartoon
118
119	---
120
121	![satirical_cartoon](../../images/1080x1920/image_satirical_cartoon.jpg)
122
123	80年代讽刺漫画风格，适合精神类小故事
124
125	- Simple Black Background
126
127	---
128
129	![simple_black](../../images/1080x1920/image_simple_black.jpg)
130
131	极简黑色背景，适合心灵鸡汤类内容
132
133	- Simple Line Drawing
134
135	---
136
137	![simple_line_drawing](../../images/1080x1920/image_simple_line_drawing.jpg)
138
139	简笔画，适合认知成长类内容
140
141	- Book
142
143	---
144
145	![book](../../images/1080x1920/image_book.jpg)
146
147	图书解读，适合科普类内容
148
149	- Long Text
150
151	---
152
153	![long_text](../../images/1080x1920/image_long_text.jpg)
154
155	长文本，适合励志鸡汤类内容
156
157	- Excerpt
158
159	---
160
161	![excerpt](../../images/1080x1920/image_excerpt.jpg)
162
163	图文摘抄，适合图文摘抄，名人名言
164
165	- Health Preservation
166
167	---
168
169	![health_preservation](../../images/1080x1920/image_health_preservation.jpg)
170
171	养生窍门，适合养生科普内容
172
173	- Life Insights
174
175	---
176
177	![life_insights_light](../../images/1080x1920/image_life_insights_light.jpg)
178
179	人生感悟，传递温暖与力量
180
181	- Full
182
183	---
184
185	![full](../../images/1080x1920/image_full.jpg)
186
187	全屏模版，适合书单号
188
189	- Healing
190
191	---
192
193	![healing](../../images/1080x1920/image_healing.jpg)
194
195	治愈模版，适合疗愈类内容
196
197	- Video_Default
198
199	---
200
201	![video_default](../../images/1080x1920/video_default.jpg)
202
203	默认动态模版
204
205	- Video_Healing
206
207	---
208
209	![video_healing](../../images/1080x1920/video_healing.jpg)
210
211	治愈动态模版
212	</div>
213
214	---
215
216	### 横屏模板 (1920x1080)
217
218	适用于 YouTube、B站等视频平台。
219
220	<div class="grid cards" markdown>
221
222	- Ultrawide Minimal
223
224	---
225
226	![ultrawide_minimal](../../images/1920x1080/image_ultrawide_minimal.jpg)
227
228	超宽屏极简风格，适合桌面端观看
229
230	- Wide Darktech
231
232	---
233
234	![wide_darktech](../../images/1920x1080/image_wide_darktech.jpg)
235
236	暗黑科技风格，适合技术、游戏内容
237
238	- Film
239
240	---
241
242	![film](../../images/1920x1080/image_film.jpg)
243
244	电影风格，沉浸式体验
245
246	- Full
247
248	---
249
250	![full](../../images/1920x1080/image_full.jpg)
251
252	全屏显示，适合书单号
253
254	- Book
255
256	---
257
258	![book](../../images/1920x1080/image_book.jpg)
259
260	图书解读，适合科普类内容
261	</div>
262
263	---
264
265	### 方形模板 (1080x1080)
266
267	适用于 Instagram、微信朋友圈等平台。
268
269	<div class="grid cards" markdown>
270
271	- Minimal Framed
272
273	---
274
275	![minimal_framed](../../images/1080x1080/image_minimal_framed.jpg)
276
277	极简边框风格，适合社交媒体分享
278
279	</div>
280
281	---
282
283	## 模板命名规范
284
285	模板采用统一的命名规范来区分不同类型：
286
287	- *`static_.html`**: 静态模板
288	- 无需 AI 生成任何媒体内容
289	- 纯文字样式渲染
290	- 适合快速生成、低成本场景
291
292	- *`image_.html`**: 图片模板
293	- 使用 AI 生成的图片作为背景
294	- 调用 ComfyUI 的图像生成工作流
295	- 适合需要视觉配图的内容
296
297	- *`video_.html`**: 视频模板
298	- 使用 AI 生成的视频作为背景
299	- 调用 ComfyUI 的视频生成工作流
300	- 创建动态视频内容，增强表现力
301
302	## 模板结构
303
304	模板位于 `templates/` 目录，按尺寸分组：
305
306	```
307	templates/
308	├── 1080x1920/ # 竖屏
309	│ ├── static_*.html # 静态模板
310	│ ├── image_*.html # 图片模板
311	│ └── video_*.html # 视频模板
312	├── 1920x1080/ # 横屏
313	│ └── image_*.html # 图片模板
314	└── 1080x1080/ # 方形
315	└── image_*.html # 图片模板
316	```
317
318	---
319
320	## 创建自定义模板
321
322	### 步骤
323
324	1. 从 `templates/` 目录复制一个现有模板文件
325	2. 修改 HTML 和 CSS 样式
326	3. 保存到对应尺寸目录下，使用 `.html` 扩展名
327	4. 在配置或 Web 界面中使用新模板名称
328
329	### 模板变量
330
331	模板支持以下 Jinja2 变量：
332
333	- `{{ title }}` - 视频标题（可选）
334	- `{{ text }}` - 当前分镜的文本内容
335	- `{{ image }}` - 当前分镜的图片（如果有）
336
337	### 示例模板
338
339	```html
340	<!DOCTYPE html>
341	<html>
342	<head>
343	<style>
344	body {
345	width: 1080px;
346	height: 1920px;
347	margin: 0;
348	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
349	display: flex;
350	align-items: center;
351	justify-content: center;
352	font-family: 'Arial', sans-serif;
353	}
354	.content {
355	text-align: center;
356	color: white;
357	padding: 40px;
358	}
359	.text {
360	font-size: 48px;
361	line-height: 1.6;
362	}
363	</style>
364	</head>
365	<body>
366	<div class="content">
367	<div class="text">{{ text }}</div>
368	</div>
369	</body>
370	</html>
371	```
372
373	---
374
375	## 模板开发技巧
376
377	### 1. 响应式尺寸
378
379	确保模板的 `body` 尺寸与目标视频尺寸一致：
380
381	- 竖屏：`width: 1080px; height: 1920px;`
382	- 横屏：`width: 1920px; height: 1080px;`
383	- 方形：`width: 1080px; height: 1080px;`
384
385	### 2. 文本排版
386
387	- 使用合适的字体大小和行高，确保可读性
388	- 为文字添加阴影或背景，提高对比度
389	- 控制文本长度，避免溢出
390
391	### 3. 图片处理
392
393	- 使用 `object-fit: cover` 确保图片填充
394	- 添加渐变或遮罩层，提升文字可读性
395	- 考虑图片加载失败的降级方案
396
397	### 4. 性能优化
398
399	- 避免使用过于复杂的 CSS 动画
400	- 优化背景图片大小
401	- 使用系统字体或 Web 安全字体
402
403	---
404
405	## 更多信息
406
407	如有模板开发相关问题，欢迎在 [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues) 中提问。
408
409

409 lines MARKDOWN