带有Jekyll和Liquid的分类导航菜单

Question

我正在用Jekyll/Liquid构建一个静态站点(没有博客).我希望它有一个自动生成的导航菜单,列出所有现有页面并突出显示当前页面.这些项目应按特定顺序添加到菜单中.因此,我weight在页面'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>

这会创建指向所有现有页面的链接,但它们未被排序,sort过滤器似乎被忽略.显然,我做错了什么,但我无法弄清楚是什么.

Answer 1

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

与@kikito解决方案相比,节省了大量的构建时间.

编辑:您必须将排序属性指定为整数weight: 10而不是字符串weight: "10".

将排序属性指定为字符串将以字符串排序结束,如"1,10,11,2,20,..."

Answer 2

你唯一的选择似乎是使用双循环.

<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 %}在当前内部页面之前/之后包含一个额外的内部循环.

Answer 3

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

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

上面的代码段按文件名name对页面进行排序(Page对象的属性是从文件名派生的).我重命名文件以匹配我想要的订单:00-index.md,01-about.md- 和presto!订购页面.

一个问题是这些数字前缀最终出现在URL中,这对于大多数页面来说看起来很尴尬,并且在00-index.html中是一个真正的问题.Permalilnks救援:

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

PS我想要聪明并添加自定义属性只是为了排序.遗憾的是,自定义属性不能作为Page类上的方法访问,因此不能用于排序:

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

Answer 4

我写了一个简单的Jekyll插件来解决这个问题:

1. sorted_for.rb从https://gist.github.com/3765912复制到_plugins您的Jekyll项目的子目录:

   module Jekyll
     class SortedForTag < Liquid::For
       def render(context)
         sorted_collection = context[@collection_name].dup
         sorted_collection.sort_by! { |i| i.to_liquid[@attributes['sort_by']] }
   
         sorted_collection_name = "#{@collection_name}_sorted".sub('.', '_')
         context[sorted_collection_name] = sorted_collection
         @collection_name = sorted_collection_name
   
         super
       end
   
       def end_tag
         'endsorted_for'
       end
     end
   end
   
   Liquid::Template.register_tag('sorted_for', Jekyll::SortedForTag)
   

2. 使用tag sorted_for而不是forwith sort_by:property参数来按给定属性进行排序.您也可以reversed像原始一样添加for.
3. 不要忘记使用不同的结束标记endsorted_for.

在您的情况下,用法如下所示:

<ul>
  {% sorted_for p in site.pages sort_by:weight %}
    <li>
      <a {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">
        {{ p.title }}
      </a>
    </li>
  {% endsorted_for %}
</ul>

Answer 5

最简单的解决方案是使用如下索引为页面的文件名添加前缀:

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

页面按文件名排序.但是,现在你会有丑陋的网址.

在您的yaml前端部分中,您可以通过设置永久链接变量来覆盖生成的URL.

例如:

---
layout: default
permalink: index.html
---

Answer 6

简易解决方案

首先分配一个排序数组,site.pages然后在数组上运行for循环.

您的代码将如下所示:

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

这适用于我的导航栏_include,简单地说:

<section id="navbar">
    <nav>
        {% assign tabs = site.pages | sort: 'weight' %}
        {% for p in tabs %}
            <span class="navitem"><a href="{{ p.url }}">{{ p.title }}</a></span>
        {% endfor %}
    </nav>
</section>

Answer 7

我用发电机解决了这个问题.生成器迭代页面,获取导航数据,对其进行排序并将其推回到站点配置.从那里Liquid可以检索数据并显示它.它还负责隐藏和显示项目.

考虑这个页面片段:

---
navigation:
  title: Page name
  weight: 100
  show: true
---
content.

使用此Liquid片段呈现导航:

{% for p in site.navigation %}
<li> 
    <a  {% if p.url == page.url %}class="active"{% endif %} href="{{ p.url }}">{{ p.navigation.title }}</a>
</li>
{% endfor %}

将以下代码放在_plugins文件夹中的文件中:

module Jekyll

  class SiteNavigation < Jekyll::Generator
    safe true
    priority :lowest

    def generate(site)

        # First remove all invisible items (default: nil = show in nav)
        sorted = []
        site.pages.each do |page|
          sorted << page if page.data["navigation"]["show"] != false
        end

        # Then sort em according to weight
        sorted = sorted.sort{ |a,b| a.data["navigation"]["weight"] <=> b.data["navigation"]["weight"] } 

        # Debug info.
        puts "Sorted resulting navigation:  (use site.config['sorted_navigation']) "
        sorted.each do |p|
          puts p.inspect 
        end

        # Access this in Liquid using: site.navigation
        site.config["navigation"] = sorted
    end
  end
end

我已经花了很长时间来解决这个问题,因为我对Jekyll和Ruby都很陌生,所以如果有人能改进这一点,那将会很棒.