blocks|key|665008|text|您唯一的选择似乎是使用双循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665009|<ul>
{%25+for+weight+in+(1..10)+%25}
++{%25+for+p+in+site.pages+%25}
++++{%25+if+p.weight+==+weight+%25}
++++++<li>
++++++++<a+{%25+if+p.url+==+page.url+%25}class="active"{%25+endif+%25}+href="{{+p.url+}}">
++++++++++{{+p.title+}}
++++++++</a>
++++++</li>
++++{%25+endif+%25}
++{%25+endfor+%25}
{%25+endfor+%25}
</ul>|code-block|syntax|javascript|665010|尽管它很丑陋，但它应该可以工作。如果你也有没有权重的页面，你将不得不包括一个额外的内部循环，只是在当前内部循环之前/之后执行{%25+unless+p.weight+%25}。|offset|length|style|CODE|665011|entityMap^0|0|0|1Q|L|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Your only option seems to be using a double loop.

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

Ugly as it is, it should work. If you also have pages without a weight, you will have to include an additional internal loop just doing <code>{% unless p.weight %}</code> before/after the current internal one.

blocks|key|665119|text|我已经用生成器解决了这个问题。生成器遍历页面，获取导航数据，对其进行排序并将其推送回站点配置。从那里，液体可以检索数据并显示它。它还负责隐藏和显示项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665120|考虑下面的页面片段：|665121|---
navigation:
++title:+Page+name
++weight:+100
++show:+true
---
content.|code-block|syntax|javascript|665122|导航是用这个液体片段呈现的：|665123|{%25+for+p+in+site.navigation+%25}
<li>+
++++<a++{%25+if+p.url+==+page.url+%25}class="active"{%25+endif+%25}+href="{{+p.url+}}">{{+p.navigation.title+}}</a>
</li>
{%25+endfor+%25}|665124|将以下代码放入_plugins文件夹中的文件中：|665125|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+%7Cpage%7C
++++++++++sorted+<<+page+if+page.data["navigation"]["show"]+!=+false
++++++++end

++++++++#+Then+sort+em+according+to+weight
++++++++sorted+=+sorted.sort{+%7Ca,b%7C+a.data["navigation"]["weight"]+<=>+b.data["navigation"]["weight"]+}+

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

++++++++#+Access+this+in+Liquid+using:+site.navigation
++++++++site.config["navigation"]+=+sorted
++++end
++end
end|665126|我已经花了相当长的时间来弄清楚这一点，因为我对Jekyll和Ruby还很陌生，所以如果有人能改进这一点就太好了。|665127|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I've solved this using a generator. The generator iterates over pages, getting the navigation data, sorting it and pushing it back to the site config. From there Liquid can retrieve the data and display it. It also takes care of hiding and showing items.

Consider this page fragment:

<pre><code>---
navigation:
 title: Page name
 weight: 100
 show: true
---
content.
</code></pre>

The navigation is rendered with this Liquid fragment:

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

Put the following code in a file in your _plugins folder:

<pre><code>module Jekyll

 class SiteNavigation &lt; 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 &lt;&lt; page if page.data["navigation"]["show"] != false
 end

 # Then sort em according to weight
 sorted = sorted.sort{ |a,b| a.data["navigation"]["weight"] &lt;=&gt; 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
</code></pre>

I've spent quite a while figuring this out since I'm quite new to Jekyll and Ruby, so it would be great if anyone can improve on this.

blocks|key|665202|text|最简单的解决方案是在页面的文件名前面加上一个索引，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665203|00-home.html+01-services.html+02-page3.html|665204|页面是按文件名排序的。但是，现在您将拥有丑陋的urls。|665205|在您的yaml内容部分，您可以通过设置permalink变量来覆盖生成的url。|665206|例如：|665207|---
layout:+default
permalink:+index.html
---|code-block|syntax|javascript|665208|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The simplest solution would be to prefix the filename of your pages with an index like this:

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

Pages are be ordered by filename. However, now you'll have ugly urls.

In your yaml front matter sections you can override the generated url by setting the permalink variable.

For instance:

<pre><code>---
layout: default
permalink: index.html
---
</code></pre>

blocks|key|665286|text|下面的解决方案适用于Github+(不需要插件)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665287|{%25+assign+sorted_pages+=+site.pages+%7C+sort:"name"+%25}
{%25+for+node+in+sorted_pages+%25}
++<li><a+href="{{node.url}}">{{node.title}}</a></li>
{%25+endfor+%25}|code-block|syntax|javascript|665288|上面的代码段按文件名对页面进行排序(+Page对象上的name属性派生自文件名)。我重命名了文件以匹配我想要的顺序：00-index.md，01-about.md+-和presto！页面是有序的。|offset|length|style|CODE|665289|一个陷阱是，这些数字前缀以URL结尾，这对大多数页面来说看起来很笨拙，在00-index.html中也是一个真正的问题。Permalilnks拯救：|665290|---
layout:+default
title:+News
permalink:+"index.html"
---|665291|附注:我想变得聪明些，只为排序而添加自定义属性。不幸的是，自定义属性不能作为Page类的方法访问，因此不能用于排序：|665292|{%25+assign+sorted_pages+=+site.pages+%7C+sort:"weight"+%25}+#bummer|665293|entityMap^0|0|0|R|4|1M|B|1Y|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

Below solution works on Github (doesn't require a plugin):

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

Above snippet sorts pages by file name (<code>name</code> attribute on Page object is derived from file name). I renamed files to match my desired order: <code>00-index.md</code>, <code>01-about.md</code> – and presto! Pages are ordered.

One gotcha is that those number prefixes end up in the URLs, which looks awkward for most pages and is a real problem in with 00-index.html. Permalilnks to the rescue:

<pre><code>---
layout: default
title: News
permalink: "index.html"
---
</code></pre>

P.S. I wanted to be clever and add custom attributes just for sorting. Unfortunately custom attributes are not accessible as methods on Page class and thus can't be used for sorting:

<pre><code>{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
</code></pre>

blocks|key|451167|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|451168|首先分配一个排序的site.pages数组，然后在该数组上运行for循环。|offset|length|style|CODE|451169|您的代码将如下所示：|451170|{%25+assign+links+=+site.pages+%7C+sort:+'weight'+%25}
{%25+for+p+in+links+%25}
++<li>
++++<a+{%25+if+p.url+==+page.url+%25}class="active"{%25+endif+%25}+href="{{+p.url+}}">
++++++{{+p.title+}}
++++</a>
++</li>
{%25+endfor+%25}|code-block|syntax|javascript|451171|这在我的导航栏_include中有效，它很简单：|451172|<section+id="navbar">
++++<nav>
++++++++{%25+assign+tabs+=+site.pages+%7C+sort:+'weight'+%25}
++++++++{%25+for+p+in+tabs+%25}
++++++++++++<span+class="navitem"><a+href="{{+p.url+}}">{{+p.title+}}</a>
++++++++{%25+endfor+%25}
++++</nav>
</section>|451173|entityMap^0|0|9|A|0|0|0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Easy solution:

Assign a sorted array of <code>site.pages</code> first then run a for loop on the array.

Your code will look like:

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

This works in my navbar <code>_include</code> which is simply:

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

blocks|key|665384|text|上面@kikito的解决方案也适用于我。我只是添加了几行代码来删除导航中没有权重的页面，并去掉了空格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|665385|<nav>
++<ul>
++++{%25+for+weight+in+(1..5)+%25}
++++++{%25+unless+p.weight+%25}
++++++++{%25+for+p+in+site.pages+%25}
++++++++++{%25+if+p.weight+==+weight+%25}
++++++++++++{%25+if+p.url+==+page.url+%25}
++++++++++++++<li>{{+p.title+}}</li>
++++++++++++{%25+else+%25}
++++++++++++++<li><a+href="{{+p.url+}}"+title="{{+p.title+}}">{{+p.title+}}</a></li>
++++++++++++{%25+endif+%25}
++++++++++{%25+endif+%25}
++++++++{%25+endfor+%25}
++++++{%25+endunless+%25}
++++{%25+endfor+%25}
++</ul>
</nav>|code-block|syntax|javascript|665386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The solution above by @kikito also worked for me. I just added a few lines to remove pages without weight from the navigation and to get rid of white space:

<pre><code>&lt;nav&gt;
 &lt;ul&gt;
 {% for weight in (1..5) %}
 {% unless p.weight %}
 {% for p in site.pages %}
 {% if p.weight == weight %}
 {% if p.url == page.url %}
 &lt;li&gt;{{ p.title }}&lt;/li&gt;
 {% else %}
 &lt;li&gt;&lt;a href="{{ p.url }}" title="{{ p.title }}"&gt;{{ p.title }}&lt;/a&gt;&lt;/li&gt;
 {% endif %}
 {% endif %}
 {% endfor %}
 {% endunless %}
 {% endfor %}
 &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

blocks|key|451258|text|如果您尝试按权重和标签进行排序，并将数量限制为10，下面是实现此目的的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|451259|{%25+assign+counter+=+'0'+%25}
{%25+assign+pages+=+site.pages+%7C+sort:+"weight"++%25}
{%25+for+page+in+pages+%25}
{%25+for+tag+in+page.tags+%25}
{%25+if+tag+==+"Getting+Started"+and+counter+<+'9'+%25}
{%25+capture+counter+%25}{{+counter+%7C+plus:'1'+}}{%25+endcapture+%25}
<li><a+href="{{+page.permalink+%7C+prepend:+site.baseurl+}}">{{page.title}}</a></li>
{%25+endif+%25}
{%25+endfor+%25}
{%25+endfor+%25}+|code-block|syntax|javascript|451260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're trying to sort by weight and by tag and limit the number to 10, here's code to do it:

<pre><code>{% assign counter = '0' %}
{% assign pages = site.pages | sort: "weight" %}
{% for page in pages %}
{% for tag in page.tags %}
{% if tag == "Getting Started" and counter &lt; '9' %}
{% capture counter %}{{ counter | plus:'1' }}{% endcapture %}
&lt;li&gt;&lt;a href="{{ page.permalink | prepend: site.baseurl }}"&gt;{{page.title}}&lt;/a&gt;&lt;/li&gt;
{% endif %}
{% endfor %}
{% endfor %} 
</code></pre>

I'm constructing a static site (no blog) with Jekyll/Liquid. I want it to have an auto-generated navigation menu that lists all existing pages and highlight the current page. The items should be added to the menu in a particular order. Therefore, I define a <code>weight</code> property in the pages' YAML:

<pre><code>---
layout : default
title : Some title
weight : 5
---
</code></pre>

The navigation menu is constructed as follows:

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

This creates links to all existing pages, but they're unsorted, the <code>sort</code> filter seems to be ignored. Obviously, I'm doing something wrong, but I can't figure out what.

Sorted navigation menu with Jekyll and Liquid

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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