Jekyll分页功能

安装Jekyll分页功能

检测自己是否已经安装了该分页插件.

sudo gem install jekyll-paginate

分页设置

在_config.yml中进行设置

# 分页
gems: [jekyll-paginate]
# 每页有几个项目
paginate: 5
paginate_path: "page/:num/"

分页处理

因为冲突的问题,所以下面显示的代码,{ % 此处均多了一个空格.

需要分页的List页面

将原来循环的post列表改为

{ % include posts_paginator.html %}

posts_paginator.html

原来的list放入此处,最后include分页链接部分.

{ % for post in paginator.posts %}
<article class="post post-1">
    <header class="entry-header">
    <h1 class="entry-title">
        <a href="{{ post.url }}">{{ post.title }}</a>
    </h1>
    <div class="entry-meta">
        <span class="post-category"><a href="{{ post.url }}">{{ post.categories }}</a></span>
        <span class="post-category"><a href="{{ post.url }}">{{ post.tag }}</a></span>

        <span class="post-date"><a href="{{ post.url }}"><time class="entry-date" datetime="{{ post.date }}">{{ post.date | date: "%B %d,%Y" }}</time></a></span>
        <span class="comments-link"><a href="{{ post.url }}">HelloLux</a></span>
    </div>
    </header>
</article>
{ % endfor %}
{ % include pagination.html %}

pagination.html

<!-- 分页链接 -->
<div class="entry-meta">
{ % if paginator.previous_page %}
    <span class="post-category"><a href="{{ paginator.previous_page_path }}">上一页</a></span>
{ % else %}
    <!-- <span class="previous">Previous</span> -->
{ % endif %}
    <span class="post-category">页数: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{ % if paginator.next_page %}
    <span class="comments-link"><a href="{{ paginator.next_page_path }}">下一页</a></span>
{ % else %}
    <!-- <span class="comments-link ">Next</span> -->
{ % endif %}
</div>

参考

jekyll，分页功能，附带分类分页！

jekyll-paginate分页问题