如何动态创建基于 Front Matter for Jekyll 的导航？

Question

目标：

导航的动态creation/management，无需管理数据文件
支持可覆盖排序
元素嵌套
隐藏页面支持

Answer 1

无需烦人的配置文件即可通过前端动态管理文档的简单方法。

前题可设置三个变量：

parent：表示是否应该嵌套在另一个页面中进行导航
hidden: false 对于公开列出的页面，可以通过直接 link 访问它
nav_priority：先显示哪个文档的权重，1最高（即top）

逻辑

可以默认为 hide/show _config.yml
页面在以下情况下显示为页眉：
- 没有parent或
- 是一个 parent 页面
如果页面有 parent，它将显示在 parent 下方
- 只能有2个级别
如果一个 parent 被隐藏，那么所有 child 个页面也会被隐藏
权重可以默认为 _config.yml 到 100 中的文档以保持在底部，或者 1 以保持在顶部

以下假设文件在 _docs 中，如果其他地方相应地更改 site.docs

{% assign pages = site.docs | where: 'hidden', false %}
{% if pages.size > 0 %}
  {% assign head_pages = pages | where: 'parent', nil | sort: 'nav_priority' %}
  {% for head_page in head_pages %}
    <h5>
      <a href="{{ head_page.url }}">{{ head_page.title }}</a>
    </h5>

    <ul>
      {% assign child_pages = pages | where: 'parent', head_page.title | sort: 'nav_priority' %}
      {% for child in child_pages  %}
        <li>
          <a href="{{ child.url }}">{{ child.title }}</a>
        </li>
      {% endfor %}
    </ul>
  {% endfor %}
{% endif %}

如何动态创建基于 Front Matter for Jekyll 的导航？

How to dynamically create a navigation based on Front Matter for Jekyll?

navigation

liquid

jekyll

逻辑