小虾米 f8894dd3f3 fix: 修复上一章/下一章导航对小数章节(如107.5)的支持

- updateNavButtons: 改用数组索引查找，而非简单的+1/-1
- updateSidebarHighlight: 使用parseFloat比较章节ID
- updateMobileTOCHighlight: 使用parseFloat比较章节ID
- 更新版本号强制刷新缓存

2026-03-27 17:42:41 +08:00

4.8 KiB

Raw Blame History

章节模板使用说明（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}}`	侧边栏全部章节	自动生成

正文内容格式

<p>这是第一段正文...</p>
<p>这是第二段正文...</p>
<p>「这是对话内容」角色说道。</p>

注意：正文内不要有章节标题，标题只在 <header> 中显示

完整示例（第35章框架）

<!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 变量支持主题切换：

:root {
    --bg-primary: 背景渐变
    --bg-container: 容器背景
    --text-primary: 主要文字颜色
    --text-secondary: 次要文字颜色
    --accent-gradient: 强调色渐变
    --border-color: 边框颜色
    --btn-bg: 按钮背景
    --btn-hover: 按钮悬停背景
}

通过 data-theme="light" 切换浅色主题。

注意事项

正文内不要放章节标题 - 标题只在 <header> 中
侧边栏需要列出全部章节 - 保持完整性
第1章的上一章要加 disabled 类
最后一章的下一章要加 disabled 类
每写新章记得更新侧边栏和 js/app.js

批量更新脚本

如需修改模板后批量更新所有章节：

node final-update.js

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

4.8 KiB Raw Blame History Unescape Escape