jekyll 中使用分页功能

对于大多数网站（尤其是博客），当文章越来越多的时候，就会有分页显示文章列表的需求。Jekyll 已经自建分页功能，你只需要根据约定放置文件即可。

分页功能只支持 HTML 文件

Jekyll 的分页功能不支持 Markdown 或 Textile 文件，而是只支持 HTML 文件。当然，这不会让你不爽。

开启分页功能

开启分页功能很简单，只需要在 _config.yml 里边加一行，并填写每页需要几行：

paginate: 5

下边是对需要带有分页页面的配置：

paginate_path: "blog/page:num"

blog/index.html 将会读取这个设置，把他传给每个分页页面，然后从第 2 页开始输出到 blog/page:num ， :num 是页码。如果有 12 篇文章并且做如下配置 paginate: 5 ， Jekyll 会将前 5 篇文章写入 blog/index.html，把接下来的 5 篇文章写入 blog/page2/index.html，最后 2 篇写入 blog/page3/index.html。

与 paginator 相同的属性

属性 描述

page	当前页码
per_page	每页文章数量
posts	当前页的文章列表
total_posts	总文章数
total_pages	总页数
previous_page	上一页页码 或 nil
previous_page_path	上一页路径 或 nil
next_page	下一页页码 或 nil
next_page_path	下一页路径 或 nil

不支持对“标签”和“类别”分页

分页功能仅仅遍历文章列表并计算出结果，并未读取 YAML 头信息，现在不支持对“标签”和“类别”分页。

生成带分页功能的文章

接下来要做的事情就是展现在页面上了，下边是一个简单的例子：

--- layout: default title: My Blog --- <!-- 遍历分页后的文章 --> {% 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 %} <!-- 分页链接 --> <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>

注意首尾页

Jekyll 没有生成文件夹 ‘page1’ ，所以上边的代码有 bug ，下边的代码解决了这个问题。

下边的 HTML 片段是第一页，他除自己外，为每个页面生成了链接。

<div id="post-pagination" class="pagination"> {% if paginator.previous_page %} <p class="previous"> {% if paginator.previous_page == 1 %} <a href="/">Previous</a> {% else %} <a href="{{ paginator.previous_page_path }}">Previous</a> {% endif %} </p> {% else %} <p class="previous disabled"> <span>Previous</span> </p> {% endif %} <ul class="pages"> <li class="page"> {% if paginator.page == 1 %} <span class="current-page">1</span> {% else %} <a href="/">1</a> {% endif %} </li> {% for count in (2..paginator.total_pages) %} <li class="page"> {% if count == paginator.page %} <span class="current-page">{{ count }}</span> {% else %} <a href="/page{{ count }}">{{ count }}</a> {% endif %} </li> {% endfor %} </ul> {% if paginator.next_page %} <p class="next"> <a href="{{ paginator.next_page_path }}">Next</a> </p> {% else %} <p class="next disabled"> <span>Next</span> </p> {% endif %} </div>