首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >带有Jekyll和Liquid的排序导航菜单

带有Jekyll和Liquid的排序导航菜单
EN

Stack Overflow用户
提问于 2012-01-29 20:11:45
回答 7查看 24K关注 0票数 69

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

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

这会创建到所有现有页面的链接,但它们没有排序,sort过滤器似乎被忽略了。很明显,我做错了什么,但我不知道是什么。

EN

回答 7

Stack Overflow用户

发布于 2012-02-03 17:21:39

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

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

尽管它很丑陋,但它应该可以工作。如果你也有没有权重的页面,你将不得不包括一个额外的内部循环,只是在当前内部循环之前/之后执行{% unless p.weight %}

票数 36
EN

Stack Overflow用户

发布于 2013-05-18 22:46:51

下面的解决方案适用于Github (不需要插件):

{% assign sorted_pages = site.pages | sort:"name" %}
{% for node in sorted_pages %}
  <li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}

上面的代码段按文件名对页面进行排序( Page对象上的name属性派生自文件名)。我重命名了文件以匹配我想要的顺序:00-index.md01-about.md -和presto!页面是有序的。

一个陷阱是,这些数字前缀以URL结尾,这对大多数页面来说看起来很笨拙,在00-index.html中也是一个真正的问题。Permalilnks拯救:

---
layout: default
title: News
permalink: "index.html"
---

附注:我想变得聪明些,只为排序而添加自定义属性。不幸的是,自定义属性不能作为Page类的方法访问,因此不能用于排序:

{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
票数 29
EN

Stack Overflow用户

发布于 2012-09-20 16:03:58

最简单的解决方案是在页面的文件名前面加上一个索引,如下所示:

00-home.html 01-services.html 02-page3.html

页面是按文件名排序的。但是,现在您将拥有丑陋的urls。

在您的yaml内容部分,您可以通过设置permalink变量来覆盖生成的url。

例如:

---
layout: default
permalink: index.html
---
票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9053066

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档