如何在github.io上使用Jekyll将静态HTML页面制作为带导航的电子书

完全可以实现，该需求恰好匹配Jekyll模板系统的设计定位，无需修改现有1000个内容HTML文件即可完成配置，具体操作步骤如下：

• 第一步：创建全局布局模板
  在项目根目录新建_layouts文件夹，在文件夹内创建default.html文件作为全站通用模板，模板内按结构编写公共的页头、左侧导航容器、页脚代码，在需要插入单页内容的位置使用Jekyll内置变量{{ content }}占位。
• 第二步：配置默认布局规则，批量适配存量HTML
  直接修改项目根目录的_config.yml，添加默认front matter配置，无需修改任何存量HTML文件：

  defaults:
    - scope:
        path: ""
        type: "html"
      values:
        layout: "default"
  

  这段配置会自动给所有HTML文件套用default布局，你现有的内容HTML会自动插入到模板的{{ content }}位置。
• 第三步：复用现有树形导航代码
  你已经提前制作好全站通用的树形导航静态HTML，直接将导航代码单独保存到项目根目录的_includes/sidebar.html文件中，在default.html的导航容器位置添加{% include sidebar.html %}即可调用导航，后续导航更新只需修改这一个文件即可全站生效。
• 第四步：添加布局样式
  给模板添加对应CSS，将左侧导航设为固定定位，内容区域设置对应左侧边距，即可实现左侧固定导航、右侧内容滚动的交互效果。

补充说明：Github Pages原生支持Jekyll的所有核心功能，配置完成后直接push到仓库即可自动构建，无需额外编译操作。如果你的现有HTML存在内部相对路径引用问题，可以统一用Jekyll的{{ site.baseurl }}变量修正路径，避免部署后资源加载异常。

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