使用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不容許三方插件，因此只能經過一些其餘的方式實現了