對(duì)于大多數(shù)網(wǎng)站(尤其是博客),當(dāng)文章越來(lái)越多的時(shí)候,就會(huì)有分頁(yè)顯示文章列表的需求。 Jekyll 已經(jīng)自建 分頁(yè)功能,你只需要根據(jù)約定放置文件即可。
分頁(yè)功能只支持 HTML 文件
Jekyll 的分頁(yè)功能不支持 Markdown 或 Textile 文件,而是只支持 HTML 文件。當(dāng)然,這不會(huì)讓 你不爽。
開(kāi)啟分頁(yè)功能很簡(jiǎn)單,只需要在 _config.yml
里邊加一行,并填寫(xiě)每頁(yè)需要幾行:
paginate: 5
下邊是對(duì)需要帶有分頁(yè)頁(yè)面的配置:
paginate_path: "blog/page:num"
blog/index.html
將會(huì)讀取這個(gè)設(shè)置,把他傳給每個(gè)分頁(yè)頁(yè)面,然后從第2
頁(yè)開(kāi)始輸出到 blog/page:num
, :num
是頁(yè)碼。如果有 12 篇文章并且做如下配置 paginate: 5
, Jekyll 會(huì)將前 5 篇文章寫(xiě)入 blog/index.html
,把接下來(lái)的 5 篇文章寫(xiě)入 blog/page2/index.html
,最后 2 篇寫(xiě)入 blog/page3/index.html
。
http://wiki.jikexueyuan.com/project/jekyll/images/15.png" alt="" />
不支持對(duì)“標(biāo)簽”和“類(lèi)別”分頁(yè)
分頁(yè)功能僅僅遍歷文章列表并計(jì)算出結(jié)果,并無(wú)讀取 YAML 頭信息,現(xiàn)在不支持對(duì)“標(biāo)簽”和“類(lèi)別”分頁(yè)。
接下來(lái)要做的事情就是展現(xiàn)在頁(yè)面上了,下邊是一個(gè)簡(jiǎn)單的例子:
---
layout: default
title: My Blog
---
<!-- 遍歷分頁(yè)后的文章 -->
{% for post in paginator.posts %}
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- 分頁(yè)鏈接 -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="/page{{ paginator.previous_page }}" class="previous">Previous</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="/page{{ paginator.next_page }}" class="next">Next</a>
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
注意首尾頁(yè)
Jekyll 沒(méi)有生成文件夾 ‘page1’ ,所以上邊的代碼有 bug ,下邊的代碼解決了這個(gè)問(wèn)題。 下邊的 HTML 片段是第一頁(yè),他除自己外,為每個(gè)頁(yè)面生成了鏈接。
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">« Prev</a>
{% else %}
<span>« Prev</span>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<em>{{ page }}</em>
{% elsif page == 1 %}
<a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
{% else %}
<a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next »</a>
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}