如何在Jekyll中更改默认页面顺序？

Question

我的博客是使用Github上的Jekyll搭建的。在导航栏中，默认顺序为Pages, Messages, About, Archives。我想将列表更改为Pages, Archives, About, Messages。我该怎么做？

我认为与以下代码相关。

{% assign pages_list = site.pages %}

我认为site.pages是我应该更改的内容，但我不知道如何操作。

- Ever

---

Jekyll中已添加了一些与订购相关的功能：https://github.com/plusjade/jekyll-bootstrap/commit/4eebb4462c24de612612d6f4794b1aaaa08dfad4 - Wojtek Kruszewski

Answer 1

您可以按照以下方式创建自定义菜单项的顺序：

1. 在您的页面正文中添加 "order" 字段（您可以根据自己的喜好命名）。

---
layout: default
published: true
title: Page title
order: 1
---

获取页面时，请应用“排序”筛选器。

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

您将得到一个基于每个页面添加的“order”字段值的有序(升序)页面列表。

根据您添加到每个页面的“order”字段值，您将获得一个按顺序排列（升序）的页面列表。

- Victor Stegaru

---

这绝对是最好的解决方案。简单明了，而且完美运作。 - Jazzer

在第二步中，一个人从哪里“获取页面”来应用排序过滤器？也就是说，我们在第二步修改的文件在哪里可以找到？ - kentkr

我使用Minima主题。在完成第一步后，对于第二步，我只需在_include文件夹下的header.html中进行修改（如果您没有它，请从Minima复制），将以下行：{%- assign default_paths = site.pages | map: "path" -%} 修改为 {%- assign default_paths = site.pages | sort:"order" | map: "path" -%}。 - LXJ

Answer 2

更新：Jekyll似乎已添加了一些排序功能：https://github.com/plusjade/jekyll-bootstrap/commit/4eebb4462c24de612612d6f4794b1aaaa08dfad4 更新：请查看下面Andy Jackson的评论- "name"可能需要更改为"path"。

对我而言，这似乎有效：

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

name 是文件名。我将页面重命名为 00-index.md，01-about.md 等等。排序是有效的，但是这些前缀会生成页面，这看起来很丑，特别是对于 00-index.html。

为了解决这个问题，我覆盖了永久链接：

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

遗憾的是，这种方法无法处理自定义属性，因为它们无法作为页面类的方法进行访问：

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

- Wojtek Kruszewski

---

这似乎不再起作用了（至少对我来说是这样），除非您按“路径”而不是“名称”进行排序。 - Andy Jackson

对我有用！2015年1月5日。 - Courtny

你可以为文件添加一个属性，例如MyMenuposition: f; 然后将其用作排序属性。 - relascope

Answer 3

你的导航栏菜单顺序由HTML模板在_layout中确定（该模板可能从_includes中引入HTML片段）。

听起来，你的导航栏是使用liquid代码从site.pages提供的页面列表自动生成的。

{% assign pages_list = site.pages %}

如果你只有很少的页面，你可能更喜欢手动写出列表。 site.pages 是Jekyll的所有页面的按字母顺序排列的列表。 但是这并不妨碍你直接硬编码：

 <div class="navbar" id="page-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="/">EverCoding.net</a>
          <ul class="nav">
            <li><a href="/pages.html">Pages</a></li>        
        <li><a href="/archive.html">Archive</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/messages.html">Messages</a></li>

我猜你现在生成了那个列表，可能是通过遵循Jekyll-bootstrap中液态代码的方式自动生成的：

<div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="{{ HOME_PATH }}">{{ site.title }}</a>
          <ul class="nav">
            {% assign pages_list = site.pages %}
            {% assign group = 'navigation' %}
            {% include JB/pages_list %}
          </ul>
        </div>
      </div>
    </div>

如果您有一个静态的菜单且按照静态顺序排列，最好手动编写菜单代码（如我的第一个示例）而不是修改液态代码进行排序。但如果您真的想每次确定菜单，则第二个示例中的液态代码非常方便。

如果您能链接到Jekyll源代码而不是发布的博客，则我们可以更具体。

- cboettig

---

谢谢。你已经查看了Jekyll源代码关于site.pages的内容。看起来它无法处理site.pages数组。 - Ever

很抱歉，我不明白你的评论。你是否使用jekyll-bootstrap模板？它可以很好地访问site.pages。根据我之前的建议，如果你只想使用你指定的四个静态页面选项，我不明白为什么你需要访问site.pages。 - cboettig

谢谢。我已经使用你的第一种方法更改了我的博客。我在上面留下了评论以供学习。我只是想知道为什么我不能在Jekyll中处理数组。 - Ever

@Ever 在 Jekyll 中确实可以处理数组，只是更加复杂。例如，您可以使用液态过滤器对 pages_list 数组进行排序（https://github.com/Shopify/liquid/wiki/Liquid-for-Designers），但您不希望按字母顺序排序。您可以手动指定顺序，例如 pages_list[3]，pages_list[2] 等，或编写自定义液态过滤器并在 Ruby 脚本中操作字符串。我认为上面的答案比我刚提到的方法更容易使用和理解。 - cboettig

你好，感谢您的回答。我使用了更改_includes/default.html中链接的代码，但我发现它仅更改主页上的导航栏，而不是其他任何页面。关于如何在整个网站上更改它们的任何帮助都将非常有用。谢谢！ - Satya

Answer 4

我正在使用Jekyll v2.5.3，你也可以为你的Markdown文件编号（按顺序排列），由于你使用了Front Matter块，因此你仍然可以按照自己的意愿设置标题和永久链接。

解析器将按照这种方式对页面链接进行排序。
例如：

01_about.md
02_photos.md
03_projects.md
99_contact.md

- Gerben Jacobs

---

谢谢，这正是我需要的，它有助于在树形视图中排列文件。 - roger

最简单的问题，最简单的解决方案，谢谢。 - Maksim Luzik

太棒了！！！！ - Cherpak Evgeny

Answer 5

我在_data目录下创建了pages.yml文件，内容如下：

- url: pages/test.html
  title: Pages
  group: navigation
- url: pages/front.html
  title: Front
  group: navigation

我将默认页面从site.pages更改为site.data.pages:

<ul class="nav">
  {% assign pages_list = site.data.pages %}
  {% assign group = 'navigation' %}
  {% include JB/pages_list %}
</ul>

现在，我可以使用这个yml文件来配置菜单。

- Ámon Tamás

Answer 6

您可以查看文档：http://jekyll.tips/jekyll-casts/navigation/。

其中有关于“navigation_weight”的良好示例和解释。

---
layout: page
title: About
permalink: /about/
navigation_weight: 10
---

对于极小值：

<div>
     {% assign navigation_pages = site.pages | sort: 'navigation_weight' %}
        {% for p in navigation_pages %}
          {% if p.navigation_weight %}
            {% if p.title %}
            <a class="page-link" href="{{ p.url | relative_url }}">{{ p.title | escape }}</a>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>

- mariope

Answer 7

对于最小化主题

放置：

header_pages:
 - pages.md
 - archive.md
 - about.md
 - messages.md

在_config.yml中可以覆盖默认顺序。就是这些。

Minima README:

Customize navigation links

This allows you to set which pages you want to appear in the navigation area and configure order of the links.

For instance, to only link to the about and the portfolio page, add the following to you _config.yml:

  - about.md
  - portfolio.md

你可以在minima _includes文件夹中的header.html文件中看到它的工作原理。

- Radek Daniluk

Answer 8

你走在正确的道路上。你可以按照自定义变量（例如“order”）进行排序。

在header.html中插入一行额外的内容：

{% assign pages_list = (site.pages | sort: 'order') %}

然后将“site.pages”替换为“pages_list”在for语句中：

{% for my_page in pages_list %}
   {% if my_page.title %}
      <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
   {% endif %}
{% endfor %}

然后在每个页面的YAML前置元数据中添加“order”，并设置一个合适的值：

---
layout: page
title: About
permalink: /about/
order: 0
---

- Laszlo

Answer 9

Jekyll Bootstrap 3模板要求在Jekyll头文件中包含group navigation。在@Wojtek的答案基础上，您可以修改JB3的pages_list来使用此group字段进行过滤和排序。

在调用pages_list之前，按组进行排序： {% assign sorted_pages = site.pages | sort:"group" %} 然后，只需更改pages_list中的一行即可： {% if group == null or group == node.group %} -> {% if group == null or node.group contains group %} 现在，您可以指定组为navigation-00、navigation-01，而无需重命名文件或设置任何永久链接，并且您可以免费获得排序。

- Jeff Brateman

---

好的，这将很好地工作，除了在GitHub页面上托管时会禁用插件。很烦人。 - Jeff Brateman

Answer 10

我一段时间前制作了一个简单插件，可以根据您在_config.yml中定义的page_order数组对页面进行排序：

pages_order: ['index', 'summary', 'overview', 'part1', 'part2', 'conclusion', 'notes']

它在模板中暴露了page.prev和page.next，以便进行导航。

{% if page.prev %}
 <a id="previous-page" href="{{page.prev}}.html">Previous</a>
{% endif %}

{% if page.next %}
 <a id="next-page" href="{{page.next}}.html">Next</a>
{% endif %} 

注意：在Github Pages上无法使用。

- Marc