Jekyll分页功能

最新推荐文章于 2024-08-25 08:27:29 发布

ZoeyZhao

最新推荐文章于 2024-08-25 08:27:29 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：技术文章标签： jekyll 分页

本文链接：https://blog.csdn.net/ZoeyZhao/article/details/99412961

技术专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Jekyll中安装和配置分页功能，包括解决分页冲突、设置_config.yml、创建分页列表页面及包含分页链接的模板。同时提到了jekyll-paginate插件和分类分页的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装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分页问题