自动生成 HTML 目录页与上下文导航链接的轻量级解决方案-html教程-PHP中文网

自动生成 HTML 目录页与上下文导航链接的轻量级解决方案

本文介绍一种基于纯 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 页面的

中引入该脚本：

<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>

✅ 优势总结

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

零构建依赖：纯前端方案，无需 Node.js、Webpack 或静态站点生成器；
强一致性：页面重命名（如 greece.html → hellas.html）只需改 PAGE_INDEX 中的 'Greece' 为 'Hellas'，所有链接与文本自动同步；
低侵入性：现有 HTML/CSS 不需重构，仅添加少量 <script> 和占位 DOM； </script>
可扩展：后续如需支持多级目录或元数据（如副标题、年代），只需扩展 PAGE_INDEX 为对象数组（[{name:'Egypt', subtitle:'Old Kingdom', year:'2686–2181 BCE'}]）。

⚠️ 注意事项