0%

用jPages为Jekyll增加分页

Jekyll 自带的分页功能总不是那么全,在官方文档中有讲到 Jekyll 自带分页的使用方法,为了达到更好的分页效果,比如在不同类别的文章下进行分页,就要用别的方法来实现了。

首先,在网上我也找到了很多 Jekyll 的第三方插件,功能很强大,不过 github 不允许使用,无奈之下只好另寻他法。因为平时做网站开发想到的都是后端分页的方法,那么在 github 这个不用考虑性能的网站上,我们为什么不能尝试使用前端分页的方法呢?而且我们的文章也不是非常多,一次得到所有数据再分页未尝不可。就这样,我在网上找到了一些基于 jQuery 的前端分页插件,使用感觉最好的就是jPages了。

jPages 的文档很详细,每种分页的方法从 html、JavaScript 到 CSS 都有源代码,并有展示,这里我讲一下我是怎么用到 jekyll 中,我使用的是 items per page 这个 example:

Step 1

首先需要把 jPages.js 和 js.js 引入页面,放在 jQuery.js 的下面

Step 2

然后在_includes/head.html中加入对应的 js:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(function() {
/* initiate the plugin */
$('div.pag-holder').jPages({
containerID: 'pag-itemContainer',
perPage: 5 /* num of items per page */,
startPage: 1,
startRange: 1,
midRange: 3,
endRange: 1,
});
});
</script>

这个 js 的作用是对id="pag-holder"的 div 进行渲染,主要是实现对应的页数和样式,对应的 html 在_includes/pagination.html中,注意 js 中的containerID,它会找页面中id=pag-itemContainer的 id,对其进行分页,观察得到其实他就是将所有的 item 包装成<ul><li>,然后对每个 item 进行分页,然后下面就好做了,下面是python.html中的部分代码:

1
2
3
4
5
6
7
<ul id="pag-itemContainer" style="list-style:none;">
{\% assign counter = 0 \%} {\% for post in site.categories['Python'] \%} {\%
assign counter = counter | plus: 1 \%}
<li>
...
</li>
</ul>
  • ps:因为 jekyll 会对代码中语法检查,我使用”\“进行转义

因为直接使用<ul><li>会有一个圆点在每个 item 之前,使用style="list-style:none;"即可去除,这里我用了一个计数器,是为了在_includes/pagination.html中判断文章是否达到分页要求,因为我设置的是perPage:5,所以我有一个大于 5 的判断。

Step 3

最后一步就是对分页的样式重新定义,因为 jPages 自带的样式很不好看,我使用的是 bootstrap,这里需要在jPages.js中进行修改,具体可以在我项目中的代码查看,有注释的部分是 jPages 原来的代码。