对于许多网站,尤其是博客,将主要的文章列表分解为较小的列表并在多个页面上显示是非常常见的。Jekyll提供了一个 pagination 插件,因此您可以自动生成分页列表所需的适当文件和文件夹。
对于Jekyll 3,在 Gemfile 和 plugins
下的 _config.yml
中包含 jekyll-paginate
插件。对于Jekyll 2来说,这是标准配置。
在Jekyll站点的Markdown文件中,分页不起作用。当从名为 index.html
的HTML文件中调用时,分页可以工作,该文件通过 paginate_path
配置值可以选择驻留在子目录中并从子目录中生成分页。
要为博客上的文章启用分页,请在 _config.yml
文件中添加一行,指定每页应显示的项目数:
paginate: 5
该数字应该是您希望在生成的网站中每页显示的文章的最大数量。
您也可以指定分页页面的 destination :
paginate_path: "/blog/page:num/"
这将在 blog/index.html
中读取,将其作为 paginator
发送到 Liquid 中的每个分页页面,并将输出写入 blog/page:num/
,其中::num
是分页页码,从 2
开始。
如果一个网站有12篇文章,并指定 paginate: 5
,Jekyll 将把带有前5篇文章的 blog/index.html
,带有下5篇文章的 blog/page2/index.html
,带有最后2篇文章的 blog/page3/index.html
写入到 destination 目录中。
在博客页面的 front matter 中设置 permalink 会导致分页中断。只需省略 permalink 即可。
最新的 jekyll-paginate-v2 插件支持更多功能。请参阅存储库中的 分页示例 。GitHub Pages不支持此插件。
分页插件使用以下属性公开 paginator
liquid 对象 :
Variable | Description |
---|---|
| The number of the current page |
| Number of posts per page |
| Posts available for the current page |
| Total number of posts |
| Total number of pages |
| The number of the previous page, or |
| The path to the previous page, or |
| The number of the next page, or |
| The path to the next page, or |
==================================================== |
对 posts
变量中的每一篇文章进行分页,除非一篇文章的 front matter 中有 hidden: true
。它目前不允许在由公共 tag 或 category 链接的文章组上进行分页。它不能包含任何文档的 collection ,因为它仅限于 posts 。
您需要做的下一件事是使用现在可用的 paginator
变量在列表中实际显示您的 posts 。你可能想在你网站的一个主页上做这件事。下面是一个在 HTML 文件中渲染分页 Posts 的简单方法的示例:
---
layout: default
title: My Blog
---
<!-- This loops through the paginated posts -->
{% 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 %}
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" 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="{{ paginator.next_page_path }}" class="next">Next</a>
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
Jekyll 不会生成 ‘page1’ 文件夹,因此当生成 /page1
链接时,上述代码将不起作用。如果这对你来说是个问题,请参阅下面的处理方法。
下面的 HTML 片段应该处理第一页,并渲染每个页面的列表,其中包含除当前页面之外的所有页面的链接。
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | relative_url }}">« 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="{{ '/' | relative_url }}">{{ page }}</a>
{% else %}
<a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | relative_url }}">Next »</a>
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}