如何更改jekyll中的默认订单页面
我的博客是用Github上的Jekyll构build的,地址是http://blog.EverCoding.net 。 在导航栏中,默认的订单是Pages,Messages,About,Archieves。 我想把这个列表改成Pages,Archieves,About,Messages。 我该怎么办?
我认为这是代码如下
{% assign pages_list = site.pages %}
我认为site.pages是我应该改变,但我不知道如何。
非常感谢。
导航栏菜单的顺序由_layout
的HTML模板_layout
(可能从_includes
拉取HTML片段。
这听起来像你的导航栏正在编程从site.pages提供的页面列表使用液体代码生成
{% assign pages_list = site.pages %}
如果你只有less量的页面,你可能更喜欢手动写出列表。 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>
第二个例子中的液体代码是非常方便的,如果你真的想每次都确定菜单,但是如果你有一个静态的静态菜单,你可能最好用我们的第一个例子来手动编写它,而不是修改液体代码进行sorting。
如果你可以链接到Jekyll的源代码,而不是发布的博客,我们可以更具体。
你可以像这样创build菜单项的自定义顺序:
1)在你的页面前面添加订单字段(你可以将它命名为preffer)
--- layout: default published: true title: Page title order: 1 ---
2)获取页面时,应用“sorting”filter
{% assign sorted_pages = site.pages | sort:"order" %} {% for node in sorted_pages %} <li><a href="{{node.url}}">{{node.title}}</a></li> {% endfor %}
根据您添加到每个页面的“订单”字段值,您将最终得到一个有序的(ASC)页面列表。
更新:一些订购function似乎已被添加到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
等。sorting工作,但页面生成与这些前缀,尤其是00-index.html看起来丑陋。
为了解决我重写永久链接:
--- layout: default title: News permalink: "index.html" ---
可悲的是,这不适用于自定义属性,因为它们不能作为Page类的方法访问:
{% assign sorted_pages = site.pages | sort:"weight" %} #bummer
我在_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文件的菜单。
Jekyll Bootstrap 3模板要求您在Jekyll标题中包含group navigation
。 基于@ Wojtek的回答,你可以修改JB3的pages_list来使用这个group
字段来过滤和sorting。
在调用pages_list之前,按组sorting:
{% 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
,而无需重命名文件或设置任何固定链接,并免费进行sorting。
你可以看到这个文档: 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>
我正在使用Jekyll v2.5.3,你也可以给你的实际降价文件编号(按这个顺序排列),而且由于你使用的是前置块,所以你仍然可以保留标题和固定链接。
parsing器将以这种方式排列页面链接。
即:
01_about.md 02_photos.md 03_projects.md 99_contact.md
我前段时间做了一个简单的插件 ,根据page_order
数组来sorting页面,你可以定义你的_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页面上不起作用。
你走在正确的道路上 你可以通过名为“order”的自定义variables进行sorting。
在header.html插入和额外的行:
{% assign pages_list = (site.pages | sort: 'order') %}
然后用for语句中的pages_listreplacesite.pages:
{% 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前端,并将其设置为合适的值:
--- layout: page title: About permalink: /about/ order: 0 ---