Jekyll 3 级子菜单答案

【问题标题】：Jekyll level 3 submenuJekyll 3 级子菜单
【发布时间】：2015-02-06 14:30:03
【问题描述】：

我想使用 jekyll 页面制作一个三层子菜单。

首先，我以这种方式创建了文件夹：

Menu item 1 
 • menu item 1.1
   • menu item 1.1.1
 • menu item 1.2
   • menu item 1.2.1
Menu item 2
 • menu item 2.1 
   • menu item 2.1.1
   • menu item 2.1.2
   • menu item 2.1.
 • menu item 2.2

等等。

目前，我的文件位于使用这种链接的文件夹中：

menuLevel1/menuLevel2/file.md

我认为我可以使用 YAML 变量来执行此操作，但看起来我无法在我的 YAML 中呈现所有变量的数组。我可以使用以下方法制作菜单：

{{ if page.menuLevel1 == "foo" and page.menulevel2 == "bar" }}

但是我被困在排序项目上，因为我有 5 个 level1 选项和 10 个 level2 选项，我认为它需要很长时间才能工作。

有什么方法可以轻松做到这一点吗？

我不知道从这里去哪里。

Tahnks 很多人。

朱

【问题讨论】：

标签： arrays yaml jekyll liquid

【解决方案1】：

也许，使用数据文件是您的一种选择。只需在包含您的菜单结构的_data-文件夹中定义一个文件menu.yml：

- title: "Menu item 1"
  href: "/menuLevel1/file.md"
  sub:
    - title: "menu item 1.1"
      href: "/menuLevel1/menuLevel2/file.md"
...
- title: "Menu item 3"
  href: "/menuLevel1/file2.md"

在您的布局中或包含您使用 for 循环遍历该文件：

<!-- 1st level -->
{% for nav in site.data.menu %}

  {% if nav.sub != null %}

    <li>
      <ul>
        <!-- 2nd level -->
        {% for sub in nav.sub %}
        <li>
          <a href="{{ site.baseurl }}{{ sub.href }}">
            {{ sub.title }}
          </a>
        </li>
        {% endfor %}
      </ul>
    </li>

  {% else %}

    <li>
      <a href="{{ site.baseurl }}{{ nav.href }}">{{ nav.title }}</a>
    </li>

  {% endif %}

{% endfor %}

使用多个子菜单，您必须添加另一个级别（即第三个 for 循环）。或者，您可以通过使用带有参数（{% include param="level" %} 和 level=site.data.menu，nav.sub，...）的包含来避免代码中的冗余，该参数在找到子菜单时使用不同的参数调用自身。

我使用与生成导航菜单类似的东西。很简单，我可以随时对菜单进行排序，并且我的 _data-dir 中包含所有配置文件和其他文件（您甚至可以将所有内容存储在 _config.yml 中 - 我喜欢使用 _data）。

希望我能帮上忙……

【讨论】：