在GitHub Pages中添加左侧导航栏及.md文件组织问题咨询

一、文件组织规范（让Jekyll识别所有页面） #

Jekyll仅会处理带有YAML Front Matter的Markdown文件，需给每个要生成站点页面的.md文件添加头部配置：

1. 基础配置示例 #

在目标.md文件开头添加以下内容（可按需调整）：

---
layout: default  # 指定使用的布局文件，对应 _layouts/default.html
title: 页面标题
permalink: /自定义路径/  # 生成页面的URL路径，比如/docs/first-page/
---

2. 你的文件结构优化建议 #

现有结构无需大幅调整，只需给对应文件补充Front Matter：

-> Root
  |
  -> _config.yml
  -> about.md       # 添加Front Matter
  -> index.md       # 添加Front Matter
  -> README.md      # 仓库说明文件，无需添加（若要纳入站点则补充配置）
  -> docs
     |
     -> first_page.md  # 添加Front Matter，指定permalink为/docs/first-page/
     -> second_page.md # 添加Front Matter，指定permalink为/docs/second-page/

二、添加左侧导航栏 #

Jekyll无内置左侧导航，需通过布局文件+Liquid模板手动实现：

1. 更新_config.yml的导航配置 #

把所有需要展示的导航项（含多级子菜单）加入配置：

title: title
description: YOUR DESCRIPTION
baseurl: '/our_domain'  # 注意路径格式，开头需加/
kramdown:
  math_engine: mathjax
  syntax_highlighter: rouge
plugins:
  - jekyll-default-layout

# 导航配置（支持多级菜单）
navigation:
  - text: 首页
    url: /
  - text: 关于
    url: /about/
  - text: 文档
    url: /docs/
    sublinks:
      - text: 第一页文档
        url: /docs/first-page/
      - text: 第二页文档
        url: /docs/second-page/

2. 修改布局文件生成导航 #

找到或创建_layouts/default.html，在页面左侧位置添加以下Liquid代码渲染导航：

<!-- 左侧导航栏 -->
<div class="sidebar">
  <ul class="nav-list">
    {% for nav_item in site.navigation %}
      <li class="nav-item">
        <a href="{{ nav_item.url | relative_url }}">{{ nav_item.text }}</a>
        <!-- 渲染子菜单 -->
        {% if nav_item.sublinks %}
          <ul class="sub-nav-list">
            {% for sub_item in nav_item.sublinks %}
              <li class="sub-nav-item">
                <a href="{{ sub_item.url | relative_url }}">{{ sub_item.text }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>

3. 添加CSS样式美化导航 #

在站点CSS文件（比如assets/css/style.css）中添加样式，固定导航位置并美化：

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 2rem 1rem;
  border-right: 1px solid #e9ecef;
}
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-item {
  margin-bottom: 1rem;
}
.nav-item a {
  color: #333;
  text-decoration: none;
  font-size: 1.1rem;
}
.sub-nav-list {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
}
.sub-nav-item a {
  font-size: 0.95rem;
  color: #666;
}
/* 主内容区偏移，避免被导航遮挡 */
.main-content {
  margin-left: 260px;
  padding: 2rem;
}

提示：如果使用Jekyll官方主题（如Minima），可查看主题文档是否有内置导航配置，直接配置即可无需手动编写HTML。

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