Jekyll中文文档_Pagination

乐寒
2023-12-01

对于许多网站,尤其是博客,将主要的文章列表分解为较小的列表并在多个页面上显示是非常常见的。Jekyll提供了一个 pagination 插件,因此您可以自动生成分页列表所需的适当文件和文件夹。

对于Jekyll 3,在 Gemfile 和 plugins 下的 _config.yml 中包含 jekyll-paginate 插件。对于Jekyll 2来说,这是标准配置。

分页仅适用于HTML文件

在Jekyll站点的Markdown文件中,分页不起作用。当从名为 index.html 的HTML文件中调用时,分页可以工作,该文件通过 paginate_path 配置值可以选择驻留在子目录中并从子目录中生成分页。

Enable pagination

要为博客上的文章启用分页,请在 _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 目录中。

Don’t set a permalink

在博客页面的 front matter 中设置 permalink 会导致分页中断。只需省略 permalink 即可。

Pagination for categories, tags and collections

最新的 jekyll-paginate-v2 插件支持更多功能。请参阅存储库中的 分页示例 。GitHub Pages不支持此插件。

Liquid Attributes Available

分页插件使用以下属性公开 paginator liquid 对象 :

VariableDescription

paginator.page

The number of the current page

paginator.per_page

Number of posts per page

paginator.posts

Posts available for the current page

paginator.total_posts

Total number of posts

paginator.total_pages

Total number of pages

paginator.previous_page

The number of the previous page, or nil if no previous page exists

paginator.previous_page_path

The path to the previous page, or nil if no previous page exists

paginator.next_page

The number of the next page, or nil if no subsequent page exists

paginator.next_page_path

The path to the next page, or nil if no subsequent page exists

====================================================

Pagination 并不支持 tags 或 categories

posts 变量中的每一篇文章进行分页,除非一篇文章的 front matter 中有 hidden: true 。它目前不允许在由公共 tag 或 category 链接的文章组上进行分页。它不能包含任何文档的 collection ,因为它仅限于 posts 。

Render the paginated 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>

Beware the page one edge-case

Jekyll 不会生成 ‘page1’ 文件夹,因此当生成 /page1 链接时,上述代码将不起作用。如果这对你来说是个问题,请参阅下面的处理方法。

下面的 HTML 片段应该处理第一页,并渲染每个页面的列表,其中包含除当前页面之外的所有页面的链接。

{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | relative_url }}">&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="{{ '/' | 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 &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}
 类似资料: