【Github Pages】徒手實現分頁

Github Pages

Github Pages 是 Github 免費提供的靜態網站生成器，你可以利用其創建個人、企業、項目網站。其提供靜態頁面託管服務和一個二級域名，也可以綁定獨立域名。

可以很輕易的找到其介紹和如何構建自己的 Github Pages,就不詳細介紹了

可以參考這些內容

What is GitHub Pages?
Using Jekyll as a static site generator with GitHub Pages
使用 github pages, 快速部署你的靜態網頁
github pages搭建個人博客

分頁

不管是個人博客還是其他主頁，內容多了就需要分頁展示文章列表。

我們選擇 Jekyll 作爲頁面生成器來管理頁面。

Jekyll 提供了分頁功能，使用上也很方便。只需要 _config.yml 文件填加分頁配置就可以直接用了。

plugins: [jekyll-paginate]
paginate: 20 # 每頁文章數
paginate_path: "essay/page:num" # 可選，分頁鏈接

然後在 index.html 直接寫上如下代碼就會自動生成分頁目錄

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

<nav class="pagination" role="navigation">
    {% if paginator.previous_page %}
    <a class="previous pagination__newer btn btn-small btn-tertiary" href="{{ paginator.previous_page_path }}">&larr; 上一頁</a>
    {% endif %}
    <span class="page_num pagination__page-number">{{ paginator.page }} / {{ paginator.total_pages }}</span>
    {% if paginator.next_page %}
    <a class="next pagination__older btn btn-small btn-tertiary" href="{{ paginator.next_page_path }}">下一頁 &rarr;</a>
    {% endif %}
</nav>

jekyll 會自動生成如下目錄

效果如下

非常方便，但是它也有很多明顯的缺點。比如他只支持 _posts 目錄下的文章進行自動生成，很大時候就不一定能滿足需求了。

自定義分頁

如上面所說，不想把所有文章都放到 _posts 一個目錄。比如我想到放在獨立的 blog 目錄

那怎麼實現目錄的自動生成和分頁呢？藉助 Data Files 和 PHP 來手動生成分頁。

_data/blogList.yml 定義如下列表

 - key: 6a1b96bda21c937f01a7591ec3e84223
   title: PHP實現一個輕量級容器
   next: Travis CI 實現自動備份Segmentfault文章到Github
 - key: 13ee9e07ce28d6310eb5fec64404fa24
   title: Travis CI 實現自動備份Segmentfault文章到Github
   prev: PHP實現一個輕量級容器
   next: Travis CI 簡介
 - key: bb800b68ec4217869667407a8c1470f6
   title: Travis CI 簡介
   prev: Travis CI 實現自動備份Segmentfault文章到Github
   next: 【php實現數據結構】鏈式隊列

在子目錄另外定義一個 page.html 模板文件

---
layout: list
type: customList
title: 我的博客
page: 1
total_pages: 100
prev_page_path: none
next_page_path: none
---

<p>同步自segmentfault(https://segmentfault.com/blog/actors315)</p>

<h2 id="目錄">目錄</h2>

<ul>
    {% for member in site.data.blogList limit:20 offset:#offset# %}
    <li><a href="/blog/markdown/{{ member.title }}">{{ member.title }}</a></li>
    {% endfor %}
</ul>

利用 data 的邏輯處理能力手動實現，然後 php 自動任務手動生成和 jekyll 自助目錄同樣的結構。

$totalCount = count($list);
$totalPage = ceil($totalCount / 20);

for ($i = 1; $i <= $totalPage; $i++) {
    if ($i == 1) {
        $tempFile = __DIR__ . "/../blog/index.html";
    } else {
        $tempFile = __DIR__ . "/../blog/page{$i}/index.html";
    }

    $newPage = false;
    if (file_exists($tempFile)) {
        $tempContent = file_get_contents($tempFile);
    } else {
        $tempContent = file_get_contents(__DIR__ . "/../blog/page.html");
        $newPage = true;
        if (!is_dir($dir = dirname($tempFile))) {
            mkdir($dir, 0777, true);
        }
    }
    $tempContent = preg_replace('/page:[\s]*\d+[^\d]/', "page: {$i}" . PHP_EOL, $tempContent);
    $tempContent = preg_replace('/total_pages:[\s]*\d+[^\d]/', "total_pages: {$totalPage}" . PHP_EOL, $tempContent);
    if ($i == 2) {
        $tempContent = preg_replace('/prev_page_path:[\s]*[^\s]+[\s]*?/', "prev_page_path: /blog/", $tempContent);
    } elseif ($i > 2) {
        $prev = $i - 1;
        $tempContent = preg_replace('/prev_page_path:[\s]*[^\s]+[\s]*?/', "prev_page_path: /blog/page{$prev}/", $tempContent);
    }

    if ($i < $totalPage) {
        $next = $i + 1;
        $tempContent = preg_replace('/next_page_path:[\s]*[^\s]+[\s]*?/', "next_page_path: /blog/page{$next}/", $tempContent);
    } elseif ($i == $totalPage) {
        $tempContent = preg_replace('/next_page_path:[\s]*[^\s]+[\s]*?/', "next_page_path: none", $tempContent);
    }

    if ($newPage) {
        $tempContent = str_replace('#offset#', ($i - 1) * 20, $tempContent);
    }

    file_put_contents($tempFile, $tempContent);
}

這裏需要配合後端代碼，Github Pages 目前是不支持動態語言的，所以需要藉助其他能力，可以參考之篇文章的介紹 《Travis CI 實現自動備份Segmentfault文章到Github》

這樣就徒手實現了一個分頁功能，並且可以根據自己的需要隨心所欲，你的分頁你作主。

詳細實現可參考我的Github 頁面 嗚啦啦的碎碎念