如何构造带有Jekyll和Liquid的排序导航菜单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (370)

我正在用Jekyll/Lid构建一个静态站点(没有博客)。我希望它有一个自动生成的导航菜单,列出所有现有的页面并突出显示当前页面。项目应按特定顺序添加到菜单中。因此,我定义属性在页的YAML中:

---
layout : default
title  : Some title
weight : 5
---

导航菜单构造如下:

<ul>
  {% for p in site.pages | sort:weight %}
    <li>
      <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
        {{ p.title }}
      </a>
    </li>
  {% endfor %}
</ul>

这将创建指向所有现有页面的链接,但它们没有排序,filter似乎被忽略了。

提问于
用户回答回答于

由于Jekyll 2.2.0,您可以根据任何对象属性对对象数组进行排序。可以:

{% assign pages = site.pages | sort:"weight"  %}
<ul>
  {% for p in pages %}
    <li>
      <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
        {{ p.title }}
      </a>
    </li>
  {% endfor %}
</ul>

它节省了大量的构建时间。

必须要把排序属性赋值为整数而不是字符串...

将排序属性赋值为String将以字符串排序结束,如“1、10、11、2、20、...”

用户回答回答于

您唯一的选择似乎是使用双循环。

<ul>
{% for weight in (1..10) %}
  {% for p in site.pages %}
    {% if p.weight == weight %}
      <li>
        <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
          {{ p.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
{% endfor %}
</ul>

扫码关注云+社区

领取腾讯云代金券