63

我的博客是用 Github 上的 Jekyll 构建的。在导航栏中，默认顺序是页面、消息、关于、档案。我想将列表更改为页面、档案、关于、消息。我该怎么办？

我认为它与下面的代码有关

{% assign pages_list = site.pages %}

我认为site.pages是我应该改变的，但我不知道如何改变。

4

10 回答 10

143

您可以像这样创建菜单项的自定义顺序：

  1. 在您的页面前面添加订单字段（您可以根据需要命名） 
    ---
layout: default
published: true
title: Page title
order: 1
---
  2. 获取页面时，应用“排序”过滤器 
    {% assign sorted_pages = site.pages | sort:"order" %}
{% for node in sorted_pages %}
  <li><a href="{{node.url}}">{{node.title}}</a></li>
{% endfor %}

根据您添加到每个页面的“订单”字段值，您最终会得到一个有序 (ASC) 页面列表。

于 2015-11-29T14:37:09.320 回答
31

更新：一些订购功能似乎已添加到 Jekyll：https ://github.com/plusjade/jekyll-bootstrap/commit/4eebb4462c24de612612d6f4794b1aaaa08dfad4

更新：查看下面安迪杰克逊的评论——“名称”可能需要更改为“路径”。

这似乎对我有用：

{% 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"
---

遗憾的是，这不适用于自定义属性，因为它们不能作为 Page 类的方法访问：

{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
于 2013-05-18T14:49:17.813 回答
21

导航栏菜单的顺序由中的 HTML 模板决定_layout（可能从_includes.

听起来您的导航栏是使用液体代码从 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 的源代码，而不是发布的博客，我们可以更具体。

于 2012-11-08T20:25:13.773 回答
9

我正在使用 Jekyll v2.5.3，您还可以对实际的降价文件进行编号（以这种方式排序），并且由于您使用的是 Front Matter 块，您仍然可以根据需要保留标题和永久链接。

解析器将以这种方式对您的页面链接进行排序。
IE：

01_about.md
02_photos.md
03_projects.md
99_contact.md
于 2015-08-19T09:06:22.980 回答
8

我在 _data 目录中创建了 pages.yml 文件，看起来类似：

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

我更改了 default.html（从 site.pages 到 site.data.pages）：

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

现在我可以将这个 yml 文件用于菜单。

于 2015-01-24T15:25:57.680 回答
8

您可以查看文档：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>
于 2017-02-23T16:22:21.773 回答
3

你走在正确的道路上。您可以按名为“order”的自定义变量进行排序。

在 header.html 插入和额外的行：

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

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

{% 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 front matter 中添加“order”，并设置一个合适的值：

---
layout: page
title: About
permalink: /about/
order: 0
---
于 2017-01-18T22:16:03.660 回答
3

对于最小主题

放：

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

in_config.yml覆盖默认顺序。就这样。

最小自述文件：

自定义导航链接

这允许您设置要在导航区域中显示的页面并配置链接的顺序。

例如，要仅链接到about和portfolio页面，请向您添加以下内容_config.yml：

  - about.md
  - portfolio.md

header.html您可以从 minima _includes中查看它在文件中的工作方式。

于 2019-10-28T02:28:53.460 回答
2

Jekyll Bootstrap 3模板要求您包含在group navigationJekyll 标头中。基于@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，而无需重命名文件或设置任何永久链接，并且您可以免费进行排序。

于 2014-06-12T17:50:15.747 回答
0

前段时间我做了一个简单的插件page_order来根据你可以定义的数组对页面进行排序_config.yml：

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 页面。

于 2016-05-03T08:37:02.647 回答