[jekyll] 02 設定 /posts/ 頁面的內容

Jekyll 實作：建立 /posts/ 文章列表頁

Jekyll 裝好以後你會發現一件事：它沒有「所有文章」的頁面。首頁有最新文章沒錯，但如果讀者想看你所有的文章呢？

先講結論

在 _pages/ 建一個 posts.md，用 Liquid 模板語法把 site.posts 迴圈列出來，然後在 _config.yml 加到 header_pages 裡。五分鐘搞定。

建立 posts.md

在 _pages 目錄下建一個 posts.md：

---
layout: page
title: "所有文章"
permalink: /posts/
---
 
<div class="posts">
    <h1>{{ page.title }}</h1>
    <ul class="post-list">
    {% for post in site.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>

site.posts 會自動抓 _posts/ 底下所有文章，按日期倒序排列。date filter 控制日期格式，你可以改成自己喜歡的樣子。

加到導覽列

在 _config.yml 把 posts.md 加到 header_pages：

header_pages:
    - about.md
    - index.md
    - posts.md

重啟 server（bundle exec jekyll serve），導覽列就會多一個「所有文章」的連結了。

就這樣。Jekyll 的好處是結構簡單，壞處也是結構簡單——很多你覺得「應該內建」的東西，其實都要自己做。

---

Jekyll 的哲學大概是「你要什麼自己寫」，很 Ruby。