鍍金池/ 教程/ Java/ 分頁(yè)功能
Assets
相關(guān)資源
創(chuàng)建頁(yè)面
基本用法
常見(jiàn)問(wèn)題
模板
升級(jí)
配置
部署方法
使用 Jekyll 的站點(diǎn)
頭信息
插件
博客遷移
永久鏈接
使用草稿
貢獻(xiàn)
分頁(yè)功能
安裝
目錄結(jié)構(gòu)
Data Files
常用變量
GitHub Pages
撰寫(xiě)博客
快速指南
附加功能

分頁(yè)功能

對(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è)功能

開(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。

與 paginator 相同的屬性

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è)。

生成帶分頁(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: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; 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 &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}
上一篇:相關(guān)資源下一篇:博客遷移