2026-03-27 17:42:41 +08:00
|
|
|
|
# 章节模板使用说明（V2）
|
|
|
|
|
|
|
|
|
|
|
|
## 模板文件
|
|
|
|
|
|
`template.html` - 增强版公共模板
|
|
|
|
|
|
|
|
|
|
|
|
## 新增功能
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 顶部固定导航栏
|
|
|
|
|
|
- **返回首页**按钮（🏠）- 返回网站首页
|
|
|
|
|
|
- **主题切换**按钮（☀️/🌙）- 切换深色/浅色模式
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 底部固定导航栏
|
|
|
|
|
|
- **上一章**按钮 - 自动根据章节号生成链接
|
|
|
|
|
|
- **目录**按钮 - 返回章节列表页
|
|
|
|
|
|
- **下一章**按钮 - 自动根据章节号生成链接
|
|
|
|
|
|
- 滚动时始终可见
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 右侧浮动按钮组
|
|
|
|
|
|
- **回到顶部**（↑）- 平滑滚动到页面顶部
|
|
|
|
|
|
- **回到底部**（↓）- 平滑滚动到页面底部
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 侧边栏章节导航
|
|
|
|
|
|
- 显示**全部34章**完整列表
|
|
|
|
|
|
- 当前章节高亮显示
|
|
|
|
|
|
- 支持滚动查看
|
|
|
|
|
|
- 桌面端右侧固定，移动端自动隐藏
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 主题切换
|
|
|
|
|
|
- 支持深色/浅色两种主题
|
|
|
|
|
|
- 自动保存用户偏好
|
|
|
|
|
|
- 所有元素颜色自适应
|
|
|
|
|
|
|
|
|
|
|
|
## 使用方法
|
|
|
|
|
|
|
|
|
|
|
|
`{{CHAPTER_META}}` 是模板占位符，用于插入章节元信息（如等级、地图），现已移除不用。
|
|
|
|
|
|
|
|
|
|
|
|
### 创建新章节
|
|
|
|
|
|
复制 `template.html` 并重命名为 `chapter-XX.html`
|
|
|
|
|
|
|
|
|
|
|
|
### 替换占位符
|
|
|
|
|
|
|
|
|
|
|
|
| 占位符 | 说明 | 示例 |
|
|
|
|
|
|
|--------|------|------|
|
|
|
|
|
|
| `{{CHAPTER_NUMBER}}` | 章节编号 | Chapter 35 |
|
|
|
|
|
|
| `{{CHAPTER_TITLE}}` | 章节标题 | 第三十五章：邪龙斯皮兹 |
|
|
|
|
|
|
| `{{CHAPTER_CONTENT}}` | 小说正文内容 | `<p>正文...</p>` |
|
|
|
|
|
|
| `{{CHAPTER_ID}}` | 章节数字ID | 35 |
|
|
|
|
|
|
| `{{PREV_CHAPTER}}` | 上一章链接 | chapter-34.html |
|
|
|
|
|
|
| `{{NEXT_CHAPTER}}` | 下一章链接 | chapter-36.html |
|
|
|
|
|
|
| `{{PREV_DISABLED}}` | 上一章是否禁用 | disabled 或 空 |
|
|
|
|
|
|
| `{{NEXT_DISABLED}}` | 下一章是否禁用 | disabled 或 空 |
|
|
|
|
|
|
| `{{SIDEBAR_CHAPTERS}}` | 侧边栏全部章节 | 自动生成 |
|
|
|
|
|
|
|
|
|
|
|
|
### 正文内容格式
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<p>这是第一段正文...</p>
|
|
|
|
|
|
<p>这是第二段正文...</p>
|
|
|
|
|
|
<p>「这是对话内容」角色说道。</p>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**注意：正文内不要有章节标题，标题只在 `<header>` 中显示**
|
|
|
|
|
|
|
|
|
|
|
|
### 完整示例（第35章框架）
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>第三十五章：邪龙斯皮兹 - 阿拉德：剑之回响</title>
|
|
|
|
|
|
<!-- 样式已内嵌 -->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- 顶部导航 -->
|
|
|
|
|
|
<nav class="top-nav">
|
|
|
|
|
|
<a href="../index.html" class="home-btn">🏠 返回首页</a>
|
|
|
|
|
|
<button class="theme-btn" id="themeToggle">☀️</button>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<header class="chapter-header">
|
|
|
|
|
|
<div class="chapter-number">Chapter 35</div>
|
|
|
|
|
|
<h1 class="chapter-title">第三十五章：邪龙斯皮兹</h1>
|
|
|
|
|
|
<div class="chapter-meta">Lv.52-55 · 暗精灵墓地</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<article class="chapter-content">
|
|
|
|
|
|
<p>四把钥匙在手中发出共鸣...</p>
|
|
|
|
|
|
<p>（正文内容，无标题）</p>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 固定底部导航 -->
|
|
|
|
|
|
<nav class="fixed-nav">
|
|
|
|
|
|
<a href="chapter-34.html" class="nav-btn">← 上一章</a>
|
|
|
|
|
|
<a href="chapters.html" class="nav-btn">📑 目录</a>
|
|
|
|
|
|
<a href="chapter-36.html" class="nav-btn disabled">下一章 →</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 滚动按钮 -->
|
|
|
|
|
|
<div class="scroll-buttons">
|
|
|
|
|
|
<button class="scroll-btn" id="scrollTop">↑</button>
|
|
|
|
|
|
<button class="scroll-btn" id="scrollBottom">↓</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 侧边栏（全部34章） -->
|
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
|
<div class="sidebar-title">📚 全部章节</div>
|
|
|
|
|
|
<a href="chapter-1.html" class="sidebar-chapter">第一章：洛兰的风</a>
|
|
|
|
|
|
...
|
|
|
|
|
|
<a href="chapter-35.html" class="sidebar-chapter current">第三十五章：邪龙斯皮兹</a>
|
|
|
|
|
|
...
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 阅读进度 + 主题切换 + 滚动功能
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## CSS 变量说明
|
|
|
|
|
|
|
|
|
|
|
|
模板使用 CSS 变量支持主题切换：
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
:root {
|
|
|
|
|
|
--bg-primary: 背景渐变
|
|
|
|
|
|
--bg-container: 容器背景
|
|
|
|
|
|
--text-primary: 主要文字颜色
|
|
|
|
|
|
--text-secondary: 次要文字颜色
|
|
|
|
|
|
--accent-gradient: 强调色渐变
|
|
|
|
|
|
--border-color: 边框颜色
|
|
|
|
|
|
--btn-bg: 按钮背景
|
|
|
|
|
|
--btn-hover: 按钮悬停背景
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
通过 `data-theme="light"` 切换浅色主题。
|
|
|
|
|
|
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
|
|
|
|
|
|
|
1. **正文内不要放章节标题** - 标题只在 `<header>` 中
|
|
|
|
|
|
2. **侧边栏需要列出全部章节** - 保持完整性
|
|
|
|
|
|
3. **第1章的上一章要加 `disabled` 类**
|
|
|
|
|
|
4. **最后一章的下一章要加 `disabled` 类**
|
|
|
|
|
|
5. **每写新章记得更新侧边栏和 js/app.js**
|
|
|
|
|
|
|
|
|
|
|
|
## 批量更新脚本
|
|
|
|
|
|
|
|
|
|
|
|
如需修改模板后批量更新所有章节：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
node final-update.js
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2026-03-25 09:30:34 +08:00
|
|
|
|
（参考 `final-update.js` 源码，可根据需要调整）
|
