let5see/AI-Video
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：add template

Browse Source
This commit is contained in:
li
2025-11-19 15:16:42 +08:00
parent 47baf1bf1e
commit 1ab9c3541a
5 changed files with 143 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/en/user-guide/templates.md
View File

@@ -130,27 +130,11 @@ Suitable for TikTok, Kuaishou, Xiaohongshu, and other short video platforms.
Simple line drawing style for cognitive growth content
- **Film**
---
![film](../../images/1920x1080/film.jpg)
Film style, immersive experience
- **Full**
---
![full](../../images/1920x1080/full.jpg)
Full screen display, suitable for book lists
- **Book**
---
![book](../../images/1920x1080/book.jpg)
![book](../../images/1080x1920/book.jpg)
Book style, suitable for book lists
</div>
@@ -179,6 +163,30 @@ Suitable for YouTube, Bilibili, and other video platforms.
Dark tech style, suitable for technology and gaming content
- **Film**
---
![film](../../images/1920x1080/film.jpg)
Film style, immersive experience
- **Full**
---
![full](../../images/1920x1080/full.jpg)
Full screen display, suitable for book lists
- **Book**
---
![book](../../images/1920x1080/book.jpg)
Book style, suitable for book lists
</div>
---

BIN
docs/images/1080x1920/book.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

7
docs/zh/user-guide/templates.md
View File

@@ -131,6 +131,13 @@
简笔画，适合认知成长类内容
</div>
- **Book**
---
![book](../../images/1080x1920/book.jpg)
图书解读，适合科普类内容
---
### 横屏模板 (1920x1080)

110
templates/1080x1920/image_book.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="template:media-width" content="1024">
<meta name="template:media-height" content="1024">
<meta name="viewport" content="width=1080, height=1920">
<title>图书解读 - 1080x1920</title>
<!-- Google Fonts - 中文字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Dancing+Script:wght@400;700&family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1920px; overflow: hidden; }
body {
font-family: 'Noto Sans SC', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
color: #fff;
position: relative;
background: #1a1a1a;
background-image: url("{{image}}");
background-size: cover;
background-position: center;
}
/* 顶部区域 */
.top-section {
position: absolute;
top: 18%;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 90%;
}
.title {
font-size: 120px;
font-weight: 900;
line-height: 1.1;
font-family: 'Noto Sans SC', sans-serif;
color: #000;
text-shadow: -3px -3px 0 #fff,
3px -3px 0 #fff,
-3px 3px 0 #fff,
3px 3px 0 #fff;
letter-spacing: 2px;
margin-bottom: 20px;
}
.subtitle {
font-size: 36px;
font-weight: 500;
font-family: 'Noto Sans SC', sans-serif;
color: #000;
text-shadow: -2px -2px 0 #fff,
2px -2px 0 #fff,
-2px 2px 0 #fff,
2px 2px 0 #fff;
letter-spacing: 2px;
}
/* 底部文字区域 */
.bottom-section {
position: absolute;
bottom: 200px;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 90%;
}
.main-text {
font-size: 60px;
font-weight: 700;
font-family: 'Noto Sans SC', sans-serif;
text-shadow: -2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
margin-bottom: 15px;
letter-spacing: 3px;
}
.signature {
font-size: 24px;
font-family: 'Liu Jian Mao Cao', 'ZCOOL KuaiLe', cursive;
text-shadow: -1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
</style>
</head>
<body>
<!-- 顶部标题区 -->
<div class="top-section">
<div class="title">{{title}}</div>
<div class="subtitle">{{subtitle=作者}}</div>
</div>
<!-- 底部文字区 -->
<div class="bottom-section">
<div class="main-text">{{text}}</div>
<div class="signature">{{author=@Pixelle.AI}}</div>
</div>
</body>
</html>

2
templates/1920x1080/image_book.html
View File

@@ -24,7 +24,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* background-color: #1a1a1a; */
background-color: #1a1a1a;
color: #ffffff;
background-image: url("{{image}}");
background-size: cover;