这是背景图片

功能:给 Jekyll 添加分页功能


安装分页插件 jekyll-paginate

接上篇,先停止 Jekyll 服务,然后执行以下代码,安装分页插件 jekyll-paginate

gem install jekyll-paginate

在文件中添加记录

1. 编辑网站根目录下文件 Gemfile(无后缀名),找到下面的位置:

group :jekyll_plugins do

2. 在 group :jekyll_plugins do 下添加记录 gem 'jekyll-paginate'

group :jekyll_plugins do
  gem "jekyll-feed"
  gem "jekyll-paginate"
end

2021.03.31 补充:在编辑这一步时,有的主题在后面添加了版本(gem 'jekyll-paginate', '~> 1.1.0'),有的没添加; 个人推荐添加,版本号可以在这里找到。

3. 编辑网站根目录下文件 _config.yml,找到下面的位置:

plugins:
  - jekyll-feed

plugins: 下添加记录 - jekyll-paginate,然后空一行添加记录 paginate: 12

plugins:
  - jekyll-feed
  - jekyll-paginate
  
paginate: 12    # 数字12表示每页显示的数量

修改和添加代码

在修改之前,需要将网站根目录下文件 index.markdown更名为 index.html(2021.03.26补充:其实改不改都能正常显示), 然后打开文件夹 _layouts,编辑文件 home.html

注:为了避免因代码冲突,导致无法正常浏览,所以在代码开头部分的 “{%” 中多加了一个空格, 变成了 “{ %”;所以要是复制的话,别忘了移除空格。

修改前:

……
{ %- for post in posts -%}
……     
{ %- endfor -%}
……

修改后:

……
{ %- for post in paginator.posts -%}
……     
{ %- endfor -%}
……
#引入分页代码
{ %- include page_paginate.html -%}   
……

分页代码(page_paginate.html)位于根目录下的 _includes 文件夹中,内容如下:

{ % if paginator.total_pages > 1 %}
<div class="pagination">
    <ul class="list-unstyled mb-0 w-100 row justify-content-center">
        <li class="col-auto">
            { % if paginator.previous_page %}
            <a href="{ { paginator.previous_page_path | relative_url }}">&laquo; 上一页</a>
            { % else %}
            <span>&laquo; 上一页</span>
            { % endif %}
        </li>
        { % for page in (1..paginator.total_pages) %}
            <li class="col-auto">
                { % if page == paginator.page %}
                <span>{ { page }}</span>
                { % elsif page == 1 %}
                <a href="{ { '/' | relative_url }}">{ { page }}</a>
                { % else %}
                <a href="{ { site.paginate_path | relative_url | replace: ':num', page }}">{ { page }}</a>
                { % endif %}
            </li>
        { % endfor %}
        <li class="col-auto">
            { % if paginator.next_page %}
            <a href="{ { paginator.next_page_path | relative_url }}">下一页 &raquo;</a>
            { % else %}
            <span>下一页 &raquo;</span>
            { % endif %}
        </li>
    </ul>
</div>
{ % endif %}

最终效果如下:


正文结束,如有错误或者遗漏请点击屏幕下方右侧的“发现错误”告诉我。