使用Jekyll在Github上搭建我的博客（分页实现）

系列文章传送门：

使用Jekyll在Github上搭建我的博客（环境搭建）

使用Jekyll在Github上搭建我的博客（博客编写）

以前已经介绍了如何搭建环境和如何建立整个博客项目，并编写了博文，这篇文章主要就是介绍分页功能如何经过jekyll实现。

前言

一个博客不可能只有几篇文章，若是全部文章所有放在一个页面中，在文章很少的状况下也许较为直观，一旦文章数量增长，不只加大了用户须要加载的数据量，也为用户检索文章形成了障碍，因此基本上每一个博客都会有文章的分页。通常的分页都是经过像JSP的模板引擎直接在从数据库中分页取出时生成动态生成页面，或者经过ajax从数据库分页取出传递到前端。但如今github+jekyll是静态的页面，没有数据库。好在jekyll支持分页功能

开启分页功能

首先咱们须要在jekyll中开启分页功能，在jekyll的_config.yml中加入分页配置：

paginate: 5
paginate_path: "page:num"

第一行定义了每页的文章数量，而第二行则定义了在分页的结果，好比在/index.html中使用分页，定义为page:num，则第二页的路径将是/page2/index.html，第三页的路径将是/page3/index.html，以此类推

须要注意的几个点：
* 分页只在html文件中起做用
* paginate_path同时定义了须要被分页的文件，本人测试这个叫index.html，具体目录由paginate_path中的路径定义，若是定义的目录没有，则会向上寻找index.html，直到根目录的index.html，具体机制官网上没有详细说，因此还须要进一步实验

使用分页

只是开启了分页尚未用，咱们须要确实使用到首页之中，在首页(/index.html)中添加以下代码：

{% for post in paginator.posts %}
    <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

这样，jekyll就会根据paginator来进行分页了，被分出来多少页，就会有多少个页面生成。排1-5的文章就在/index.html中了，而排6-10的文章则在/page2/index.html中，依次类推

换页

只是分页还不够，咱们还须要在每一个页面上作一个跳转到其余页面的导航，这里须要用到paginator的一些其余属性

首先检测总的页数，若是只有一页，天然就不须要分页了。经过paginator的total_pages属性能判断总页数：

{% if paginator.total_pages > 1 %}
<!-- 分页代码 -->
{% endif %}

咱们须要一个跳转到上一页的按钮，这个按钮在第一页不须要显示，经过paginator的previous_page属性来判断是不是第一个页面，使用paginator的previous_page_path来输出上一页的路径，注意在前面添加baseurl，并进行一些必要的字符替换：

{% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"上一页</a>
{% endif %}

接着是生成全部页面的按钮，并使当前页按钮无效化，遍历全部页面，使用paginator的page属性来肯定当前页，若是是当前页，则按钮无效，不然使用{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}来将:num替换成当前页面的数字生成页面路径：

{% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <span class="active">{{ page }}</span>
    {% elsif page == 1 %}
      <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
{% endfor %}

最后生成一个下一页的按钮，在最后一页不显示，和上一页按钮相似，经过paginator的next_page_path来肯定是否还有下一页：

{% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">下一页</a>
{% endif %}

这样一个完整的分页导航功能就作好了，效果就和博客主页上的分页效果是同样的

总结

jekyll的分页总的来讲还算给力，基本的功能能够完成。可是有一些缺陷，就是category，tag的分类分页没法实现，必须经过插件的方式来作。可是github不容许三方插件，因此只能经过一些其余的方式实现了