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

最新推荐文章于 2023-05-05 22:31:41 发布

weixin_34259559

最新推荐文章于 2023-05-05 22:31:41 发布

阅读量672

点赞数

文章标签： markdown

原文链接：https://segmentfault.com/a/1190000007709682

版权

分页功能

对于大多数网站（尤其是博客），当文章越来越多的时候，就会有分页显示文章列表的需求。
Jekyll 已经自建分页功能，你只需要根据约定放置文件即可。
但是有一些缺陷，就是category，tag的分类分页无法实现，必须通过插件的方式来做。

重点来了！

几番周折，几番折腾，终于实现分类分页，此时我内心控制不住的激动开始井喷般爆发！
先试想一下，假如我实现分类分页了，jekyll-paginate是不是也只能对一个index.html页面生效？如果我想对多个页面分页呢？如何配置？
jekyll-paginate的分页还是蛮坑的！完全没法满足我的需求，满足我内心的饥渴。于是，决定修改它！先付上"原装功能实现"！

在 Jekyll 3 中，需要在 gems 中安装 jekyll-paginate 插件，并添加到你的 Gemfile 和 _config.yml 中。在 Jekyll 2 中，分页是标准功能。

分页功能只支持 HTML 文件

Jekyll 的分页功能不支持 Jekyll site 中的 Markdown 或 Textile 文件。
分页功能从名为 index.html 的 HTML 文件中被调用时，才能工作。
分页功能是可选的，可能通过 paginate_path 配置的值，驻留和生成在子目录中。

开启分页功能

开启分页功能很简单，只需要在 _config.yml 里边加一行，指明每页该展示多少项目：

paginate:5
paginate_path: "page:num"

blog/index.html 将会读取这个设置，把它传给每个分页页面，然后从第 2 页开始输出到 blog/page:num, :num 是页码。
如果有 12 篇文章并且做如下配置 paginate: 5, Jekyll 会将前 5 篇文章写入 blog/index.html，把接下来的 5 篇文章写入blog/page2/index.html，最后 2 篇写入 blog/page3/index.html。

不要设置 permalink

在你的博客的头信息中设置 permalink 会造成分页功能的瘫痪。缺省设置 permalink 即可。
由此可见，jekyll的分页真的蛮坑的！

可用的 Liquid 属性

分页功能插件使得 paginator liquid 对象具有下列属性：

属性	描述
`page`	当前页码
`per_page`	每页文章数量
`posts`	当前页的文章列表
`total_posts`	总文章数
`total_pages`	总页数
`previous_page`	上一页页码或 `nil`（如果上一页不存在）
`previous_page_path`	上一页路径或 `nil`（如果上一页不存在）
`next_page`	下一页页码或 `nil`（如果下一页不存在）
`next_page_path`	下一页路径或 `nil`（如果下一页不存在）

不支持对“标签”和“类别”分页

分页功能遍历 posts下的所有文章，而忽略定义在文章内的头信息中的变量。
现在不支持对“标签”和“类别”分页。也不支持任何文件集合，因为该功能被限制在 posts 中。

生成带分页功能的文章

接下来你需要做的事情，就是使用你已经掌握的 paginator 变量，列表展示你的文章。下边是一个简单的例子，在 HTML 文件中生成带分页功能的文章（以下使用bootstrap的分页）：

遍历分页后的文章

---
layout: default
title: My Blog
---

<!-- 遍历分页后的文章 -->
{% 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 %}

<!-- 分页链接 -->
<div class="pagination">
{% if paginator.previous_page %}
<a href="/page{{ paginator.previous_page }}" 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="/page{{ paginator.next_page }}" class="next">Next</a>
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>

自定义插件paginate

其实就是修改版的jekyll-paginate，小小的装一下(奸笑)。废话不多说直接上干货！
关于自定义插件，不多说，上传送门——插件

先说一下，jekyll安装插件,有两种安装插件的方式：

在网站根下目录建立 _plugins 文件夹，插件放在这里即可。 Jekyll 运行之前，会加载此目录下所有以 *.rb 结尾的文件。
在 _config.yml 文件中，添加一个以 gems 作为 key 的数组，数组中存放插件的 gem 名称。
例如：gems: [jekyll-test-plugin, jekyll-jsonify, jekyll-assets]

然后，引入两个文件pager.rb和paginate.rb放到_plugins

传送门——click here!

同样开启分页功能

注意，这里跟jekyll—paginate不一样的地方！

paginate:5
paginatepath: ['topics/study/page/:num','topics/life/page/:num']

没错，这里的paginatepath: []已然不再是paginate_path:"page:num而是一个数组！就是我说的，假如我想对多个页面分页呢？

需要注意的点：

index.html一定要放在你的分类名称的文件夹下！切记！
index.html关于分类，我的做法是每个页面配置category，我也是根据category实现分页的

到此已经完成了。可以尽情的使用了！其他功能都跟jekyll的分页类似了。

原文地址：http://bamzc.top/2016/11/03/j...