基于Jekyll minimal主题的Github Page自定义侧边栏添加问题

问题核心原因 #

• 你对front matter的理解是正确的：普通页面、布局文件的配置确实需要写在顶部的两组---之间，但全局配置文件_config.yml不需要包裹---，你给_config.yml加三组短横线属于错误操作。
• 你参考的侧边栏配置是Minimal Mistakes主题的专属功能，你当前使用的jekyll-minimal-theme没有内置对应的侧边栏渲染逻辑，因此你添加的配置无法被识别生效。

具体操作步骤（低风险，不会影响原有功能） #

步骤1：清理错误配置 #

删除你之前在_config.yml中添加的两组---，以及相关的Minimal Mistakes专属的defaults配置，先恢复全局配置的正常状态。你之前创建的_data/navigation.yml无需修改，可以直接复用。

步骤2：覆盖主题默认布局 #

将jekyll-minimal-theme官方仓库中的_layouts/default.html文件复制到你自己站点仓库的_layouts/路径下（如果没有该文件夹就新建），本地的布局文件会自动覆盖主题自带的默认布局，不会修改主题本身的代码，风险极低。

步骤3：给布局添加侧边栏结构 #

编辑你刚复制的_layouts/default.html，修改整体结构，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
    <!-- 新增侧边栏样式，你也可以把样式写到独立的css文件里 -->
    <style>
      .container {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      .sidebar {
        width: 200px;
        padding-right: 30px;
        border-right: 1px solid #eee;
      }
      .sidebar ul {
        list-style: none;
        padding: 0;
      }
      .sidebar li {
        margin-bottom: 10px;
      }
      .sidebar a {
        text-decoration: none;
        color: #333;
      }
      .sidebar a:hover {
        text-decoration: underline;
      }
      .main-content {
        flex: 1;
        padding-left: 30px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 新增侧边栏区域 -->
      <aside class="sidebar">
        <h3>导航</h3>
        <ul>
          {% for item in site.data.navigation.main %}
          <li><a href="{{ item.url }}">{{ item.title }}</a></li>
          {% endfor %}
        </ul>
      </aside>
      <!-- 原来的内容放到主内容区域 -->
      <div class="main-content">
        {{ content }}
      </div>
    </div>
  </body>
</html>

你可以根据自己的需求调整样式参数，比如侧边栏宽度、颜色、间距等。

步骤4：推送生效 #

修改完成后将代码推送到Github仓库，等待Github Pages构建完成后就能看到侧边栏生效。如果需要本地预览，可以执行jekyll serve命令在本地启动服务查看效果。

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