通过一个集中维护的页面顺序数组，结合轻量级 javascript，可全自动为每页生成目录索引、前后页链接及标题，彻底避免手动修改带来的错误与重复劳动。
通过一个集中维护的页面顺序数组，结合轻量级 javascript，可全自动为每页生成目录索引、前后页链接及标题，彻底避免手动修改带来的错误与重复劳动。
在构建多页静态历史类网站（如古代帝国专题）时，手动维护目录页（TOC）和每页的「上一页 / 下一页」链接极易出错——新增、删减或重命名页面后，需同步修改至少三处（目录页 + 前页导航 + 后页导航）。解决方案无需构建复杂 CMS 或引入构建工具，仅需一个单一可信数据源（即页面顺序定义）和少量内联脚本即可实现完全自动化。
✅ 核心思路：一份数组，全局驱动
将所有页面的逻辑顺序唯一定义在一个 JavaScript 数组中，例如：
// pages-index.js（保存在项目根目录或 js/ 文件夹下） const PAGE_INDEX = ['Egypt', 'Babylon', 'Greece', 'Rome'];
该数组即为整站结构的“唯一真相源”：插入 Babylon？只需修改此处；将 Greece 改为 Hellas？仅改这一行，全站自动同步。
✅ 在每个 HTML 页面中动态注入导航
在每页
中引入该 JS 文件，并立即执行导航逻辑：立即学习“Java免费学习笔记（深入）”；
<head>
<script src="pages-index.js"></script>
<script>
// 获取当前页面文件名（不含扩展名），如 "egypt.html" → "egypt"
const currentSlug = window.location.pathname.split('/').pop().split('.')[0];
const currentIndex = PAGE_INDEX.indexOf(currentSlug);
// 生成前/后页链接文本与 URL
const prevPage = currentIndex > 0 ? PAGE_INDEX[currentIndex - 1] : null;
const nextPage = currentIndex < PAGE_INDEX.length - 1 ? PAGE_INDEX[currentIndex + 1] : null;
// 动态写入导航区域（假设有 id="nav" 的容器）
const navEl = document.getElementById('nav');
if (navEl) {
let html = '<div class="pagination">';
if (prevPage) {
html += `<a href="${prevPage}.html" class="prev">← ${prevPage}</a>`;
}
if (nextPage) {
html += `<a href="${nextPage}.html" class="next">${nextPage} →</a>`;
}
html += '</div>';
navEl.innerHTML = html;
}
</script>
</head>? 提示：确保所有 HTML 文件名与 PAGE_INDEX 中的字符串严格一致（小写、无空格、无特殊字符），例如 egypt.html 对应 'Egypt' —— 若需显示大小写混合的标题（如 “Ancient Egypt”），可在数组中直接使用完整标题，或建立映射对象（见下方进阶建议）。
✅ 自动生成目录页（toc.html）
在 toc.html 中，同样引入 pages-index.js，然后遍历 PAGE_INDEX 渲染有序列表：
<main>
<h1>Table of Contents</h1>
<ol>
<script>
PAGE_INDEX.forEach((slug, i) => {
const title = slug; // 或使用映射：TITLE_MAP[slug] || slug
document.write(`<li><a href="${slug}.html">${title}</a></li>`);
});
</script>
</ol>
</main>⚠️ 注意事项与最佳实践
- 路径一致性：所有 HTML 文件应位于同一目录（如根目录），否则需统一处理 window.location.pathname 解析逻辑（推荐使用 new URL(window.location).pathname 更健壮）。
- SEO 友好性：上述方案依赖客户端 JS 渲染，若需搜索引擎友好，可配合简单 Node.js 脚本在构建时预生成静态 HTML（5 分钟即可完成）。
-
标题美化（进阶）：如需显示更丰富的标题（如 'Egypt': 'Ancient Egypt (c. 3100–30 BCE)'），可将 PAGE_INDEX 替换为对象数组：
const PAGES = [ { slug: 'egypt', title: 'Ancient Egypt (c. 3100–30 BCE)' }, { slug: 'babylon', title: 'Babylon and the Neo-Babylonian Empire' }, // ... ];然后按 slug 匹配当前页，用 title 渲染链接文本。
- 无构建、零依赖：整个方案不依赖 Node、Webpack 或任何服务器，纯静态 HTML + 原生 JS，部署到 GitHub Pages、Netlify 或任意主机均可开箱即用。
这套方法以极简设计解决高频痛点：一次定义，处处生效；拖拽重排？只需编辑一行数组。对于非虚构写作、教学文档、手册类静态站点，它平衡了可控性、可维护性与开发效率——真正的“简单，但不简陋”。
