如何在Jekyll的HTML文件中实现YAML配置的导航栏下拉菜单

1. 校验navigation.yml配置格式 #

YAML对缩进要求严格，必须使用2个空格作为层级缩进，否则Jekyll无法正确读取sublinks配置，正确格式参考：

- title: "首页"
  url: "/"
- title: "关于"
  url: "/about/"
- title: "Contact Us"
  sublinks:
    - title: "Text goes here"
      url: "#"
    - title: "Text goes here"
      url: "#"
    - title: "Text goes here"
      url: "#"

2. 修改导航栏HTML模板 #

将原有的循环逻辑替换为支持下拉判断的版本，代码如下：

<ul class="visible-links">
  {%- for link in site.data.navigation.main -%}
    <li class="masthead__menu-item {% if link.sublinks %}dropdown{% endif %}">
      {% if link.sublinks %}
        <!-- 有下拉的导航项 -->
        <a href="javascript:void(0);" {% if link.description %} title="{{ link.description }} "{% endif %}>{{ link.title }}</a>
        <ul class="dropdown-menu">
          {% for sublink in link.sublinks %}
            <li>
              <a href="{{ sublink.url | relative_url }}" {% if sublink.description %} title="{{ sublink.description }}"{% endif %}>{{ sublink.title }}</a>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <!-- 普通导航项 -->
        <a href="{{ link.url | relative_url }}" {% if link.description %} title="{{ link.description }} "{% endif %}>{{ link.title }}</a>
      {% endif %}
    </li>
  {%- endfor -%} 
</ul>

逻辑说明：遍历导航配置时，会自动判断当前项是否存在sublinks配置，存在则渲染下拉子菜单结构，不存在则保持原有普通链接渲染逻辑。

3. 添加下拉交互样式 #

你需要在站点CSS文件中添加以下基础样式，实现hover触发下拉的效果：

/* 下拉容器基础样式 */
.dropdown {
  position: relative;
}
/* 默认隐藏子菜单 */
.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 120px;
  background: #fff;
  border: 1px solid #eee;
}
/* hover时显示子菜单 */
.dropdown:hover .dropdown-menu {
  display: block;
}
/* 子菜单项样式 */
.dropdown .dropdown-menu li {
  padding: 8px 12px;
}
.dropdown .dropdown-menu li a {
  text-decoration: none;
  color: inherit;
}

你可以根据自己站点的设计风格调整样式细节。

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