本文介绍一种基于纯 javascript 的极简方案：通过维护一个全局页面顺序数组，自动为每页生成目录索引、前后页链接及标题，彻底避免手动维护导致的错链与重命名遗漏问题。
本文介绍一种基于纯 javascript 的极简方案：通过维护一个全局页面顺序数组，自动为每页生成目录索引、前后页链接及标题，彻底避免手动维护导致的错链与重命名遗漏问题。
在构建多页静态历史类网站（如古代帝国专题）时，手动维护目录页（toc.html）和各页面中的“上一页/下一页”链接极易出错——插入新章节（如在 Egypt 与 Greece 之间加入 Babylon）、调整顺序或修改页面标题（如将 greece.html 重命名为 hellas.html），均需同步更新至少三处：目录页链接、前页的“下一页”链接、后页的“上一页”链接。
核心思路：单一数据源 + 客户端动态渲染
只需一个集中管理的 JS 文件（例如 nav-data.js），定义所有页面的规范名称与顺序，其余逻辑由浏览器端 JavaScript 自动完成：
// nav-data.js —— 唯一需要手动编辑的文件 const PAGE_INDEX = ['Egypt', 'Babylon', 'Greece', 'Rome']; // ✅ 插入/重排/重命名仅在此处操作
在每个 HTML 页面的 <head> 中引入该脚本：
<script src="nav-data.js"></script>
<script>
// 自动推导当前页名（基于文件名，如 egypt.html → 'Egypt'）
const currentPath = window.location.pathname;
const fileName = currentPath.split('/').pop().split('.')[0];
const currentPage = fileName.charAt(0).toUpperCase() + fileName.slice(1); // 确保首字母大写
const i = PAGE_INDEX.indexOf(currentPage);
const prevPage = i > 0 ? PAGE_INDEX[i - 1] : null;
const nextPage = i < PAGE_INDEX.length - 1 ? PAGE_INDEX[i + 1] : null;
</script>1. 在内容页中生成上下页导航栏
在页面主体合适位置（如页脚）添加如下 HTML 结构，JS 动态填充：
<nav class="page-nav">
<div class="prev">
<a href="index.html" id="prev-link" style="display:none;">← Previous</a>
</div>
<div class="next">
<a href="index.html" id="next-link" style="display:none;">Next →</a>
</div>
</nav>
<script>
const prevLink = document.getElementById('prev-link');
const nextLink = document.getElementById('next-link');
if (prevPage) {
prevLink.href = `${prevPage.toLowerCase()}.html`;
prevLink.textContent = `← ${prevPage}`;
prevLink.style.display = 'inline';
}
if (nextPage) {
nextLink.href = `${nextPage.toLowerCase()}.html`;
nextLink.textContent = `${nextPage} →`;
nextLink.style.display = 'inline';
}
</script>2. 在目录页（toc.html）中自动生成完整列表
利用同一 PAGE_INDEX 数组，无需硬编码：
<h2>Table of Contents</h2>
<ol id="toc-list"></ol>
<script>
const tocList = document.getElementById('toc-list');
PAGE_INDEX.forEach((title, idx) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `${title.toLowerCase()}.html`;
a.textContent = title;
li.appendChild(a);
tocList.appendChild(li);
});
</script>✅ 优势总结
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 零构建依赖：纯前端方案，无需 Node.js、Webpack 或静态站点生成器；
- 强一致性：页面重命名（如 greece.html → hellas.html）只需改 PAGE_INDEX 中的 'Greece' 为 'Hellas'，所有链接与文本自动同步；
- 低侵入性：现有 HTML/CSS 不需重构，仅添加少量 <script> 和占位 DOM；
- 可扩展：后续如需支持多级目录或元数据（如副标题、年代），只需扩展 PAGE_INDEX 为对象数组（[{name:'Egypt', subtitle:'Old Kingdom', year:'2686–2181 BCE'}]）。
⚠️ 注意事项
立即学习“前端免费学习笔记（深入）”；
- 文件名须严格匹配数组中名称的小写形式（如 'Egypt' → egypt.html），建议统一使用英文单词+小写命名；
- 若部署在子路径（如 /history/egypt.html），window.location.pathname 仍能正确解析，无需额外处理；
- 所有页面必须确保 nav-data.js 加载成功，建议将其置于 CDN 或同域根目录以保障加载稳定性。
这一方案用不到 30 行核心代码，就将易错的手工维护转化为可靠、可预测的自动化流程——让作者专注写作，而非链接运维。
