Question

我想使用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很多人。

菊

Answer 1

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

- 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 %}

使用多个子菜单时，您必须添加另一个级别（即第3个循环）。另外，通过使用包含参数（{% include param="level" %}和level = site.data.menu，nav.sub，...）的include可以避免代码中的冗余，只要子菜单是找到。

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

希望我能帮忙......

Jekyll 3级子菜单

1 个答案: