适用场景:用户有主题方向，需要AI生成完整内容并排版
操作流程:
```bash
python scripts/check_content.py --data '{"title":"标题","subtitle":"副标题","intro":"导语","quotes":["引用"],"sections":[{"title":"章节","content":["段落"]}],"ending":"结尾"}'
```
```bash
python scripts/save_html.py --data '{"title":"标题","subtitle":"副标题","intro":"导语内容","quotes":["引用1"],"sections":[{"title":"章节标题","content":["段落1","段落2"]}],"ending":"结尾内容"}' --output "./articles/雨夜旧信箱.html"
```
适用场景:用户提供了已有文章，需要格式化整理
操作流程:
如果用户提交相同主题/内容的文章：
生成HTML代码时必须确保语法正确，用户可直接复制使用：
文字。 ← 句点在标签外是正确的文字重点。后文 ← 标签内不能有句点后跟中文句号重点内容后文文字加粗后文文字加粗。
第一行
第二行
第三行排版完成后直接保存为HTML文件，用户可直接下载使用：
scripts/save_html.py 脚本生成HTML文件<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章标题</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
background: linear-gradient(180deg, #faf8f5 0%, #f5f0ea 100%);
min-height: 100vh;
color: #2a2a2a;
line-height: 1.9;
}
.container { max-width: 720px; margin: 0 auto; padding: 50px 24px 80px; }
/* 标题区 */
.header { text-align: center; margin-bottom: 50px; }
.title { font-size: 2.2em; font-weight: 700; color: #2a2a2a; margin-bottom: 16px; letter-spacing: 2px; }
.subtitle { font-size: 1.1em; color: #8B7355; font-weight: 300; }
/* 分隔线 - 星点设计 */
.divider { text-align: center; margin: 40px 0; color: #c4a882; font-size: 14px; letter-spacing: 8px; }
.divider::before, .divider::after { content: '✦'; }
.divider-center { content: '✧'; }
/* 导语区 */
.intro { background: #fff; border-radius: 16px; padding: 32px; margin-bottom: 40px; box-shadow: 0 2px 20px rgba(0,0,0,0.04); }
.intro p { color: #555; font-size: 1.05em; }
/* 引用卡片 - 视觉焦点 */
.quote-card {
background: linear-gradient(135deg, #fdfcfb 0%, #f8f5f0 100%);
border-left: 4px solid #8B7355;
border-radius: 0 16px 16px 0;
padding: 28px 32px;
margin: 32px 0;
position: relative;
}
.quote-card::before {
content: '"';
position: absolute;
top: -10px;
left: 20px;
font-size: 60px;
color: #d4c4b0;
font-family: Georgia, serif;
line-height: 1;
}
.quote-card p { color: #3a3a3a; font-size: 1.1em; font-style: italic; padding-left: 20px; }
/* 章节标题 */
.section-title { font-size: 1.5em; color: #2a2a2a; margin: 50px 0 24px; padding-left: 16px; border-left: 4px solid #8B7355; }
/* 正文段落 */
.content p { color: #4a4a4a; margin-bottom: 20px; font-size: 1.02em; text-align: justify; }
/* 重点标注 - 渐变底色 */
.highlight {
background: linear-gradient(180deg, rgba(245,230,211,0.6) 0%, rgba(232,212,192,0.4) 100%);
padding: 3px 8px;
border-radius: 4px;
color: #5a4a3a;
}
/* 列表 */
.content ul, .content ol { padding-left: 28px; margin: 20px 0; }
.content li { color: #4a4a4a; margin-bottom: 12px; }
/* 结尾卡片 - 深色渐变 */
.ending-card {
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
border-radius: 20px;
padding: 40px 36px;
margin-top: 60px;
text-align: center;
color: #f5f0ea;
}
.ending-card p { color: #c4b8a8; font-size: 1.05em; line-height: 1.8; }
.ending-card .ending-icon { font-size: 32px; margin-bottom: 20px; }
/* 响应式适配 */
@media (max-width: 768px) {
.container { padding: 30px 16px 60px; }
.title { font-size: 1.7em; }
.quote-card { padding: 20px 24px; }
.ending-card { padding: 30px 24px; }
}
</style>
</head>
<body>
<div class="container">
<!-- 标题区 -->
<div class="header">
<h1 class="title">文章标题</h1>
<p class="subtitle">副标题/导语简述</p>
</div>
<div class="divider">✧</div>
<!-- 导语 -->
<div class="intro">
<p>这里是开篇导语，引入主题，吸引读者继续阅读...</p>
</div>
<!-- 引用卡片（可选，用于突出重要内容） -->
<div class="quote-card">
<p>这里是引用/信函/重要内容的展示区域，视觉焦点...</p>
</div>
<!-- 正文章节 -->
<h2 class="section-title">第一章：核心主题</h2>
<div class="content">
<p>正文内容段落，使用<span class="highlight">重点标注</span>强调关键信息。</p>
<p>继续展开论述，保持阅读节奏...</p>
<ul>
<li>要点一：简洁有力</li>
<li>要点二：层次分明</li>
<li>要点三：视觉丰富</li>
</ul>
</div>
<!-- 更多章节... -->
<!-- 结尾卡片 -->
<div class="ending-card">
<div class="ending-icon">✦</div>
<p>这里是结尾总结，收束全文，<br>留下回味与思考...</p>
</div>
</div>
</body>
</html>
只要回头，就会失去现在拥有的一切安稳。只要回头，就会失去现在拥有的一切安稳。| 元素 | 标签/类名 | 说明 |
|---|---|---|
| ------ | ----------- | ------ |
| 标题区 | .header .title | 居中，2.2em Bold |
| 星点分割线 | .divider | ✦...✧...✦ |
| 导语卡片 | .intro | 白色圆角卡片 |
| 引用卡片 | .quote-card | 暖棕竖线+斜体 |
| 章节标题 | .section-title | 左侧竖线强调 |
| 重点标注 | .highlight | 渐变底色 |
| 结尾卡片 | .ending-card | 深灰渐变背景 |
| 响应式 | @media | 768px断点适配 |
共 1 个版本