WordPress 功能很多，這是優點，也是有時讓人打開後台就先想泡咖啡的原因。如果你想要一個能用控制面板管理內容、又能把內容和模板放進 Git 的 CMS，Statamic 值得認真看一眼。它把 CMS 的方便，和檔案型工作流程放在同一張桌上——咖啡則放旁邊，避免灑到 YAML。

這篇會帶你認識 Statamic 的 flat-file 模式、用 Laravel Herd 建立本機環境，接著做出首頁、文章集合、文章列表與可重複使用的模板片段。讀完後，你也會知道它和 WordPress、11ty 的定位差在哪裡，以及什麼情況適合選它。

目錄

Statamic 是什麼？

Statamic 是建立在 Laravel 上的內容管理系統。它預設使用 flat-file 模式：內容、設定與模板可以用 YAML、Markdown、Antlers 模板等檔案管理，而不是一開始就要求你準備資料庫。

「檔案型」不代表它只有編輯器。Statamic 仍然提供控制面板、內容集合、欄位藍圖、路由和模板系統；需要時，也能改用資料庫儲存。這種設計的重點，是先讓專案保持簡單，等需求真的長大再決定資料儲存方式。

換句話說，Statamic 不是把 CMS 藏在資料庫裡，而是讓你可以在控制面板和程式碼編輯器之間自由切換。內容可以給編輯者管理，結構和模板則可以交給 Git 追蹤。這比在資料庫裡尋找某段設定，少一點考古，多一點開發。

外掛與 Starter Kits

Statamic 有外掛與 Marketplace，可以依專案需求增加功能。不過，選外掛前仍然要先確認相容版本、維護狀態和授權方式；「有外掛」不等於「所有外掛都該裝」。外掛裝太多，網站會像咖啡加了十種糖漿：不是不能喝，但已經忘記原本是什麼味道。

Starter Kits 是什麼？

Starter Kits 是預先準備好的網站起點，通常包含內容結構、模板、樣式和功能。它們比較像「可以繼續修改的專案骨架」，不是 WordPress 那種套上去就結束的主題。每個 Kit 可以有自己的內容模型與設計，因此使用前要先看清楚它包含哪些檔案和功能。

第一次使用時，建議先從空白專案開始。你會比較清楚每一個集合、欄位和模板從哪裡來；熟悉後，再用 Starter Kit 加速重複性高的專案。

先準備本機開發環境

Statamic 的官方文件把 Laravel Herd 列為 macOS 和 Windows 初學者的推薦路徑。Herd 會協助準備 PHP、Composer 和本機 Web 伺服器，省下手動拼裝開發環境的步驟。

如果你已經有 PHP 和 Composer，也可以直接使用 Statamic CLI。這篇先採 Herd 路線，因為少一點環境設定，就多一點時間看網站真的跑起來。

使用 Laravel Herd

安裝 Herd 後，把專案放進 Herd 管理的目錄，再安裝 Statamic CLI：

composer global require statamic/cli

接著建立一個新專案。這個指令會啟動設定精靈，讓你選擇空白網站或 Starter Kit，並建立第一位管理者：

cd ~/Herd
statamic new try-statamic

完成後，Herd 會把專案提供在類似以下的本機網址：

http://try-statamic.test

控制面板則位於 /cp：

http://try-statamic.test/cp

看到首頁和登入畫面，就代表基本環境完成。接下來不急著安裝十個套件，我們先做一個最小的內容流程。

認識首頁與 Antlers 模板

Statamic 的預設首頁模板位於 resources/views/home.antlers.html。副檔名中的 .antlers.html 很重要：它告訴 Statamic 這是一個要由 Antlers 解析的模板，不是原封不動送出的 HTML。

最小的首頁可以先這樣寫：

<h1>歡迎光臨我的 Statamic 實驗站！</h1>

{{ content }}

{{ content }} 會放入目前頁面的內容。模板儲存後重新整理頁面，就能看到結果。Antlers 使用雙大括號，看起來像鬍子；如果模板開始長出真的鬍子，通常是熬夜太久，不是語法功能。

Layout 負責共同外框

網站的共同結構通常放在 resources/views/layout.antlers.html，例如 HTML 外框、導覽列、頁尾和資產引用。頁面模板產生的內容，會插入 {{ template_content }} 的位置：

<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title ?? site:name }}</title>
</head>
<body>
    {{ template_content }}
</body>
</html>

你可以把 Layout 想成相框：每一頁的內容會變，外框則可以共用。這樣修改頁尾時，不必逐頁複製貼上，少一次複製，也少一次「為什麼只有這頁沒有更新」的偵探劇。

建立部落格的內容集合

在 Statamic 裡，Collection 是一組有共同結構的內容，例如文章、產品或作品集。建立 blog 集合後，文章項目會依集合設定儲存；flat-file 模式下，你可以在專案內直接找到並編輯這些 Markdown 檔案。

先規劃一個簡單的部落格：

  • title：文章標題
  • date：發布日期
  • author：作者
  • content：正文
  • featured_image：精選圖片

欄位不是越多越專業。先從讀者真的需要的資料開始，之後再透過 Blueprint 增加欄位。

產生文章模板

建立集合時，Statamic 可以協助產生基本模板，例如：

resources/views/blog/index.antlers.html
resources/views/blog/show.antlers.html

前者用來顯示文章列表，後者用來顯示單篇文章。若你的專案版本或設定產生了不同的檔案名稱，請以實際產生的檔案為準；模板路徑是專案設定的一部分，不要只靠截圖猜路徑。

設定日期與網址

發布日期不是每個網站都必須顯示的欄位，但部落格通常需要它來排序和呈現文章資訊。網址則由 Collection 的 route 設定決定，建議一開始保持簡單，確定內容模型後再設計更複雜的 URL。

顯示文章列表

建立第一篇文章後，就可以用 Collection Tag 讀取 blog 集合。下面的例子把最多五篇文章列在首頁：

<h1>{{ title }}</h1>
{{ content }}

<ul>
    {{ collection:blog limit="5" }}
        <li>
            <a href="{{ url }}">
                <span>{{ title }}</span>
                <time>{{ date }}</time>
            </a>
        </li>
    {{ /collection:blog }}
</ul>

collection:blog 會讀取 blog 集合，limit="5" 則限制輸出數量。這裡的 blog 是集合 handle，不是隨便取的裝飾文字；handle 打錯時，模板通常不會替你把咖啡端過來。

部落格索引頁

在 Pages 集合建立一個部落格頁面，將它設為文章列表使用的模板。resources/views/blog/index.antlers.html 可以重用前面的 Collection Tag：

<h1>{{ title }}</h1>
{{ content }}

{{ collection:blog limit="5" }}
    <a href="{{ url }}">{{ title }}</a>
{{ /collection:blog }}

單篇文章頁

單篇文章模板則負責顯示標題、日期、作者與正文：

<article>
    <h1>{{ title }}</h1>
    <p>Published on {{ date }} by {{ author:name }}</p>
    {{ content }}
</article>

{{ content }} 是文章正文，{{ author:name }} 則是讀取作者資料的寫法之一；實際欄位名稱要和你的 Blueprint 一致。

把重複內容抽成 Partial

文章列表會同時出現在首頁和索引頁。若兩邊都直接複製同一段模板，日後改一個 HTML class 就要改兩次，久了會養出兩份長得很像、脾氣卻不同的程式碼。

在 resources/views/blog/ 建立 _listing.antlers.html，底線是常見的 partial 命名約定：

<ul>
    {{ collection:blog limit="5" }}
        <li>
            <a href="{{ url }}">{{ title }}</a>
        </li>
    {{ /collection:blog }}
</ul>

頁面中再引用它：

{{ partial:blog/_listing }}

Partial 是可重用的模板片段，不是完整頁面。把列表集中管理後，首頁和索引頁就能共享同一份輸出邏輯。

加上導覽列

如果網站有 Pages 集合，可以使用 Nav Tag 產生導覽：

<nav>
    {{ nav from="pages" include_home="true" }}
        <a href="{{ url }}">{{ title }}</a>
    {{ /nav }}
</nav>

把這段放進 Layout，所有套用該 Layout 的頁面就能共用導覽列。樣式可以之後再加，先讓資料流動起來；CSS 不會因為等五分鐘而生氣，但你可能會。

用 Blueprint 增加精選圖片

Blueprint 用來定義集合或頁面的欄位。你可以在 blog 集合的 Blueprint 增加 featured_image，選擇適合圖片資產的欄位型別，並限制單篇文章的圖片數量。

設定欄位時，請分清楚「顯示名稱」和「Handle」。模板會使用 Handle，例如 featured_image。圖片的替代文字也應該在內容編輯時填好，讓無法看見圖片的讀者仍然知道它代表什麼。

在文章模板中輸出圖片時，欄位的實際回傳格式會受 Blueprint 和資產設定影響。最基本的概念如下：

<img src="{{ featured_image }}" alt="{{ featured_image:alt }}">

如果專案使用資產陣列或需要圖片轉換，請依官方 Assets 文件和實際欄位輸出調整模板，不要直接照抄一段不符合資料格式的範例。

Statamic、WordPress 與 11ty 怎麼選？

三者都能拿來做網站，但解決的問題不同：

  • Statamic：適合需要控制面板、內容集合、欄位藍圖，又希望內容與設定能以檔案管理的團隊。它建立在 Laravel 上，前端可以使用 Antlers，也能依專案選擇其他做法。
  • WordPress：適合想快速使用成熟後台、佈景主題和外掛生態的使用者。彈性很高，但網站的實際行為會取決於佈景主題、外掛和主機環境。
  • 11ty：適合偏好 Markdown、Git 和靜態輸出的開發者。它是靜態網站產生器，不是內建內容編輯控制面的 CMS；需要多人後台時，通常要另外整合服務。

Statamic 的 flat-file 模式和 11ty 都重視檔案與版本控制，但使用感不同：11ty 偏向建置時把內容產生為靜態檔案；Statamic 則保留 CMS 的管理介面和動態應用程式能力。選擇時先問自己：編輯者需要後台嗎？內容是否需要複雜欄位？部署流程和團隊習慣是哪一種？

適合誰使用？

Statamic 適合以下情境：

  • 內容團隊需要控制面板，但開發團隊想用 Git 管理內容結構和模板。
  • 專案需要自訂 Collection、Blueprint、路由和前端設計。
  • 團隊熟悉 Laravel、PHP 或希望沿用 Laravel 的開發方式。
  • 想從 flat-file 開始，未來再依規模評估資料庫或 Headless 架構。

如果你只想寫幾篇 Markdown，並且不需要後台，11ty 可能更直接。如果你希望安裝主題、調整設定後立即上線，WordPress 的現成生態可能更省力。Statamic 的自由度很高，但自由度也代表你需要自己做一些決定；它不是「完全不用想」的 CMS，而是「可以決定要怎麼想」的 CMS。

結語

Statamic 的核心魅力，不只是「不用資料庫」這一句話，而是把 CMS、檔案型內容、版本控制和 Laravel 開發流程接在一起。從 CLI 建立專案，設定 Collection，再用 Antlers 和 Partial 組出頁面，你可以逐步理解每一層，而不是一次吞下一整套黑盒子。

先做一個小部落格，確認內容模型和模板邏輯，再考慮外掛、Starter Kit、圖片處理或部署。網站開發像手沖咖啡：水溫、比例和流程都重要，但第一杯先喝得下去，比研究半天濾杯角度更重要。

參考資料