[jekyll] 03 設定首頁的內容

Jekyll 首頁改造：加上分頁功能

Jekyll 的預設首頁就是把所有文章列出來。文章少的時候還好，一旦超過二三十篇，首頁就會變成一條無底洞。

先講結論

在 _config.yml 設定 paginate: 5，然後自己寫一個 home.html layout 來處理分頁邏輯。最後把 index.md 的 layout 指向 home 就好。

設定分頁

先在 _config.yml 加上分頁設定：

paginate: 5
paginate_path: "/page:num/"

paginate: 5 代表每頁顯示 5 篇文章。數字看你文章多寡自己調整，我覺得 5-10 篇是比較舒服的範圍。

建立 home layout

在 _layouts/ 建一個 home.html：

---
layout: default
---
 
<div class="home">
    <h1 class="page-heading">{{ page.title | escape }}</h1>
    <ul class="post-list">
    {% for post in paginator.posts %}
        <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
        <h2>
            <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
        </h2>
        </li>
    {% endfor %}
    </ul>
    <div class="pagination">
    {% if paginator.previous_page %}
        <a class="pagination-item older" href="{{ paginator.previous_page_path | relative_url }}">&larr; 較舊</a>
    {% endif %}
    {% if paginator.next_page %}
        <a class="pagination-item newer" href="{{ paginator.next_page_path | relative_url }}">較新 &rarr;</a>
    {% endif %}
    </div>
</div>

注意這裡用的是 paginator.posts 而不是 site.posts——前者是分頁後的結果，後者是全部文章。搞混了你就會發現「分頁怎麼沒有效」。

更新 index.md

把首頁的 layout 指向剛才建的 home：

---
layout: home
title: "首頁"
permalink: /
---

重啟 server，首頁就會有分頁功能了。如果你需要更複雜的分頁（像是顯示頁碼而不只是上下頁），可以查 jekyll-paginate 的文件，或考慮換成 jekyll-paginate-v2。

---

Jekyll 的分頁要自己寫 layout，2024 年了還在手刻分頁，這就是「原始」的浪漫嗎。