通过一个集中维护的页面顺序数组，配合轻量级 javascript 脚本，可全自动渲染目录页与每页的上下文导航（含页面标题），彻底避免手动修改带来的错误和重复劳动。
通过一个集中维护的页面顺序数组，配合轻量级 javascript 脚本，可全自动渲染目录页与每页的上下文导航（含页面标题），彻底避免手动修改带来的错误和重复劳动。
在撰写长篇在线非虚构历史书籍（如古代帝国系列）时，手动维护目录页（TOC）及每页的「上一页」「下一页」链接极易出错：插入新章节（如在 Egypt 和 Greece 之间加入 Babylon）、重命名页面（如将 Greece 改为 Hellas）或调整顺序，均需跨多个 HTML 文件逐一修改，既耗时又易遗漏。
核心思路：单一数据源 + 客户端动态渲染
只需一个统一的 index.js 文件定义所有页面的名称与顺序，其余 HTML 页面通过 <script> 引入该文件，并利用当前 URL 自动识别自身位置，从而动态生成导航逻辑——无需服务端、不依赖构建工具，纯前端零配置实现。
✅ 步骤一：创建全局索引文件（index.js）
保存在网站根目录（如 /js/index.js），内容如下：
// js/index.js const index = ['Egypt', 'Greece', 'Rome']; // ✅ 唯一权威顺序源：增删改仅在此处操作
⚠️ 注意：页面文件名必须与数组中字符串完全一致（如 Egypt.html、Greece.html），且建议统一使用 .html 后缀。
✅ 步骤二：在每个 HTML 页面 <head> 中引入并解析
<head>
<script src="/js/index.js"></script>
<script>
// 从当前 URL 提取页面名（如 /Egypt.html → 'Egypt'）
const name = window.location.pathname.split('/').filter(p => p).pop().split('.')[0];
const i = index.indexOf(name);
// 计算前后页名称（边界安全处理）
const prevName = i > 0 ? index[i - 1] : null;
const nextName = i < index.length - 1 ? index[i + 1] : null;
</script>
</head>✅ 步骤三：在正文区域动态渲染导航（通用模板）
立即学习“Java免费学习笔记（深入）”；
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
① 每个内容页底部添加上下页按钮：
<footer class="nav-footer">
<div class="nav-group">
{% if prevName %}
<a href="{{ prevName }}.html" class="nav-link prev">← {{ prevName }}</a>
{% endif %}
<a href="index.html" class="nav-link toc">Table of Contents</a>
{% if nextName %}
<a href="{{ nextName }}.html" class="nav-link next">{{ nextName }} →</a>
{% endif %}
</div>
</footer>? 实际项目中可直接用原生 JS 插入 DOM（避免模板语法）：
document.querySelector('.nav-group').innerHTML = ` ${prevName ? `<a href="${prevName}.html">← ${prevName}</a>` : ''} <a href="index.html">Contents</a> ${nextName ? `<a href="${nextName}.html">${nextName} →</a>` : ''} `;
② 目录页（index.html）自动生成完整列表：
<main>
<h1>Table of Contents</h1>
<ol id="toc-list"></ol>
</main>
<script>
const tocList = document.getElementById('toc-list');
index.forEach((title, idx) => {
const li = document.createElement('li');
li.innerHTML = `<a href="${title}.html">${title}</a>`;
tocList.appendChild(li);
});
</script>✅ 优势总结
- ? 一次修改，全局生效：调整 index.js 数组顺序或名称，所有页面导航自动同步；
- ? 零侵入式集成：不改变现有 HTML/CSS 结构，仅新增轻量脚本；
- ?️ 健壮性保障：边界检查（i > 0 / i < length-1）确保首尾页无无效链接；
- ? 未来可扩展：后续如需支持多级目录、锚点跳转或拖拽排序 UI，可在同一数据源基础上增强，无需重构逻辑。
这套方案用不到 20 行核心代码，就将繁琐的手动维护转化为声明式管理——让作者专注写作，而非链接调试。
