# 章节模板使用说明（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
```

（参考 `final-update.js` 源码，可根据需要调整）