如何自动生成HTML目录页及带页面名称的上下页跳转链接？

1. 静态站点生成器（SSG）方案 #

这类工具专门解决静态内容的批量生成与维护问题，适配你的在线书籍场景：

• 选择轻量型SSG，比如Eleventy（11ty）或Jekyll，无需复杂配置即可快速上手
• 操作步骤：
  • 所有页面内容改用Markdown编写，每个页面头部添加YAML元数据，定义标题和排序优先级：

    ---
    title: "罗马帝国的崛起"
    order: 3
    ---
    

  • 编写目录模板：遍历所有页面文件，按order字段排序，自动生成带链接的目录列表
  • 编写页面通用模板：在模板中根据当前页面的order值，找到排序后数组里的前后页面，自动插入带标题的上一页/下一页跳转链接
  • 后续增删改页面，只需调整Markdown文件或元数据，执行构建命令（如npx eleventy）即可自动更新所有目录和跳转链接

2. 自定义Node.js脚本方案 #

如果不想依赖SSG，自己写个简单脚本也能实现需求：

• 维护一个JSON配置文件，记录所有页面的核心信息：

  [
    {"filename": "intro.html", "title": "前言", "order": 1},
    {"filename": "egypt.html", "title": "古埃及文明", "order": 2}
  ]
  

• 脚本核心逻辑：
  1. 读取JSON文件并按order排序
  2. 生成目录页的HTML链接列表，替换目录页中预留的占位符（比如<!-- AUTO-DIRECTORY -->）
  3. 遍历每个页面文件，找到当前页面在排序后数组中的位置，获取前后页面的标题和文件名，替换页面内的上一页/下一页占位符
• 可以用Node.js的fs模块读写文件，cheerio库处理HTML内容；页面排序可以配合简单的GUI工具（比如用Electron做个拖拽排序界面）或在线表格调整后导出JSON

3. 纯前端动态生成方案 #

适合不想用后端或构建工具的场景：

• 在全局JS文件中定义页面元数据数组，排序后存储：

  const bookPages = [
    {"url": "intro.html", "title": "前言", "order": 1},
    {"url": "egypt.html", "title": "古埃及文明", "order": 2}
  ].sort((a, b) => a.order - b.order);
  

• 目录页：用JS遍历bookPages，动态创建<a>元素生成完整目录
• 书籍页面：通过window.location.pathname获取当前页面URL，在bookPages中匹配到对应项后，计算前后页面的索引，动态生成带标题的跳转链接
• 注意：这种方式依赖JS渲染内容，对SEO有一定影响

内容的提问来源于stack exchange，提问作者greglo