如何用Jekyll实现随文件自动切换的动态头部导航？

一、先搭好最简Jekyll环境 #

1. 确保已安装Ruby和Jekyll（没装的话搜「Jekyll 快速开始」按官方步骤复制命令安装即可）
2. 新建项目：

jekyll new my-nav-site
cd my-nav-site

3. 启动本地服务测试：

jekyll serve

打开http://localhost:4000能看到默认页面就成功了。

二、按目录规划内容结构 #

完全用文件夹对应菜单层级来组织Markdown文件，示例结构：

my-nav-site/
├── docs/
│   ├── frontend/
│   │   ├── html.md
│   │   └── css.md
│   ├── backend/
│   │   ├── python.md
│   │   └── node.md
│   └── tools.md
├── _layouts/
│   └── default.html  # 我们要修改这个文件添加导航
└── index.md

• 每个文件夹对应一个一级菜单（比如frontend、backend）
• 文件夹内的md文件对应子菜单
• 根目录下的docs/tools.md作为单独的一级菜单

三、写头部导航模板（自动识别目录+展开） #

打开_layouts/default.html，替换原有的<nav>部分为以下代码：

<nav>
  <ul class="main-menu">
    <!-- 按目录分组遍历所有页面 -->
    {% assign pages_by_dir = site.pages | group_by: 'dir' %}
    {% for dir in pages_by_dir %}
      {% if dir.name != '' %} <!-- 跳过根目录页面 -->
        <!-- 提取一级菜单名称（比如docs/frontend/ → frontend） -->
        {% assign menu_name = dir.name | split: '/' | last %}
        <!-- 判断当前页面是否属于该目录 -->
        {% assign is_active = false %}
        {% for page in dir.items %}
          {% if page.url contains dir.name %}
            {% assign is_active = true %}
          {% endif %}
        {% endfor %}
        <!-- 渲染一级菜单 -->
        <li class="menu-item {% if is_active %}active{% endif %}">
          <a href="{{ dir.items[0].url }}">{{ menu_name | capitalize }}</a>
          <!-- 渲染子菜单 -->
          <ul class="sub-menu {% if is_active %}show{% endif %}">
            {% for page in dir.items %}
              <li class="sub-item {% if page.url == page.url %}active{% endif %}">
                <a href="{{ page.url }}">{{ page.title }}</a>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% endif %}
    {% endfor %}
    <!-- 渲染单独的一级页面（比如docs/tools.md） -->
    {% for page in site.pages %}
      {% if page.dir == '/docs/' and page.name != 'index.md' %}
        <li class="menu-item {% if page.url == page.url %}active{% endif %}">
          <a href="{{ page.url }}">{{ page.title }}</a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>

四、加CSS实现菜单展开/收起 #

在assets/css/style.css末尾添加以下样式：

/* 基础菜单样式 */
.main-menu {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 10px;
  background: #f5f5f5;
}

.menu-item {
  position: relative;
}

/* 默认隐藏子菜单 */
.sub-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #eee;
  padding: 10px;
  display: none;
}

/* 父菜单激活时显示子菜单 */
.menu-item.active .sub-menu,
.sub-menu.show {
  display: block;
}

/* 当前页面菜单项高亮 */
.menu-item.active > a,
.sub-item.active > a {
  color: #2196f3;
  font-weight: bold;
}

五、编写Markdown内容的规范 #

每个Markdown文件开头必须加YAML前端元数据，示例docs/frontend/html.md：

---
layout: default
title: HTML 入门
---

# HTML 基础
直接用标准Markdown语法编写内容即可：
- 标题用#、##分级
- 无序列表用-
- 加粗用**内容**，斜体用*内容*

• layout: default：指定使用我们修改的模板
• title：会作为子菜单的显示文字

六、测试效果 #

1. 重启Jekyll服务：

jekyll serve

2. 点击导航的Frontend会展开子菜单；点击HTML后，对应菜单会高亮并保持展开；访问其他目录的页面，对应菜单也会自动展开高亮。

整个方案完全基于Jekyll自带功能，无复杂插件，目录结构清晰，新增内容只需添加文件夹或Markdown文件即可。

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