用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：

  <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中的部分代码：

		<ul id="pag-itemContainer" style="list-style:none;">
    {\% assign counter = 0 \%}
		{\% for post in site.categories['Python'] \%}
		{\% assign counter = counter | plus: 1 \%}
		<li>
		...

• ps：因为jekyll会对代码中语法检查，我使用”\“进行转义

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

Step 3

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