f8894dd3f3
- updateNavButtons: 改用数组索引查找，而非简单的+1/-1 - updateSidebarHighlight: 使用parseFloat比较章节ID - updateMobileTOCHighlight: 使用parseFloat比较章节ID - 更新版本号强制刷新缓存
158 lines
4.8 KiB
Markdown
158 lines
4.8 KiB
Markdown
# 章节模板使用说明（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` 源码，可根据需要调整） |