如何在Jekyll中创建水平菜单？将文章转为页面实现类WordPress菜单

一、将博客文章转为独立页面 #

• 在项目根目录创建对应页面的文件夹，比如要做「教程」页面就建tutorial文件夹，内部添加index.md（或index.html）文件。
• 把原文章内容复制到这个index.md中，修改YAML Front Matter：设置layout: page（依赖主题自带的页面布局，无则用默认布局或自定义），移除date、categories这类博客文章专属字段，补充title: 页面标题。
• 转完后可删除或移走_posts目录下的原文章，避免重复渲染。

二、创建WordPress风格的水平菜单 #

方法1：硬编码固定菜单（适合菜单结构稳定的场景） #

• 找到主题的导航模板文件，通常是_includes/header.html或_layouts/default.html里的导航区块。
• 用HTML结构编写菜单，再通过CSS实现水平排列：

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/tutorial/">教程</a></li>
    <li><a href="/about/">关于我</a></li>
    <li><a href="/contact/">联系我</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
}

nav a:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
}

方法2：数据文件动态生成菜单（适合需灵活修改的场景） #

• 项目根目录创建_data文件夹（无则新建），内部添加navigation.yml文件：

- title: 首页
  url: /
- title: 教程
  url: /tutorial/
- title: 关于我
  url: /about/
- title: 联系我
  url: /contact/

• 在导航模板中用Jekyll循环生成菜单：

<nav>
  <ul>
    {% for item in site.data.navigation %}
      <li><a href="{{ item.url }}">{{ item.title }}</a></li>
    {% endfor %}
  </ul>
</nav>

• 同样使用上面的CSS代码实现水平布局。

额外优化：高亮当前页面 #

要让当前所在页面的菜单高亮，可在循环中增加URL匹配判断：

<nav>
  <ul>
    {% for item in site.data.navigation %}
      <li>
        <a href="{{ item.url }}" {% if page.url == item.url %}class="active"{% endif %}>
          {{ item.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>

再补充CSS样式：

nav a.active {
  color: #007bff;
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

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