如何更改 Jekyll 中的默认订单页面？

Posted 2023-02-16

【中文标题】如何更改 Jekyll 中的默认订单页面？

【英文标题】：How to change the default order pages in Jekyll?

【发布时间】：2012-10-27 07:28:10

【问题描述】：

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

我觉得和下面的代码有关

% assign pages_list = site.pages %

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

【问题讨论】：

Jekyll 中添加了一些与订购相关的功能：github.com/plusjade/jekyll-bootstrap/commit/…

【参考方案1】：

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

在您的页面前面添加订单字段（您可以随意命名）

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

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

【讨论】：

这是最好的解决方案。直截了当，而且效果很好。

对于第 2 步，“获取页面”在哪里应用排序过滤器？ IE。在哪里可以找到我们为第二步修改的文件？

【参考方案2】：

更新：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

【讨论】：

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

为我工作！ 2015 年 1 月 5 日。

您可以向文件添加属性，例如我的菜单：f；然后将其用作排序属性

【参考方案3】：

导航栏菜单的顺序由_layout 中的HTML 模板决定（可能从_includes 中提取HTML 片段。

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

【讨论】：

谢谢。 Ni看过关于site.pages的Jekyll source aboue。看起来它无法处理 site.pages 数组

恐怕我不关注你的评论。你在使用 jekyll-bootstrap 模板吗？它访问 site.pages 就好了。根据我上面的建议，如果您打算使用您指定的四个静态页面选项，我不明白为什么需要访问 site.pages。

谢谢。我用你的第一种方法改变了我的博客。我在上面给出评论以供学习。我只是想知道为什么我不能处理 jekyll 中的数组..

@Ever 你确实可以在 Jekyll 中处理数组，只是更复杂。例如，您可以使用液体过滤器对 pages_list 数组 (github.com/Shopify/liquid/wiki/Liquid-for-Designers) 进行排序，但您不需要按字母顺序排序。您可以手动指定顺序，pages_list[3], pages_list[2] 等，或者编写自定义液体过滤器并在 ruby​​ 脚本中操作字符串。我只是觉得上面的答案比我刚才提到的更容易使用和理解。

抱歉 - 我刚刚习惯了这一点，但不清楚您建议的代码块放在哪里（哪些文件）。使用 jekyllbootstrap，我找到了_assets/JB/pages_list。我会把液体代码放在那个文件里吗？或者，html代码会去哪里？

【参考方案4】：

我在 _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 文件用于菜单了。

【参考方案5】：

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

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

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

【讨论】：

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

【参考方案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>

【参考方案7】：

你走在正确的道路上。您可以按名为“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 %

然后将'order'添加到每个页面的YAML前端，并设置一个合适的值：

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

【参考方案8】：

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

【讨论】：

好吧，当托管在禁用插件的 GitHub 页面上时，这将工作正常 except。跛脚。

【参考方案9】：

对于最小主题

放：

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

在_config.yml 中覆盖默认顺序。就是这样。

最小自述文件：

自定义导航链接

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

例如，仅链接到 about 和 portfolio 页面， 添加以下内容给你_config.yml:

  - about.md
  - portfolio.md

您可以在 minima _includes 的 header.html 文件中查看它的工作原理。

【参考方案10】：

我前段时间做了一个simple plugin 来根据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 页面。