【Github Pages】徒手實現分頁
Github Pages
Github Pages 是 Github 免費 提供的靜態網站生成器,你可以利用其建立個人、企業、專案網站。其提供靜態頁面託管服務和一個二級域名,也可以繫結獨立域名。
可以很輕易的找到其介紹和如何構建自己的 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 }}">← 上一頁</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 }}">下一頁 →</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 頁面 嗚啦啦的碎碎念