由於 WordPress 功能繁多得讓人眼花繚亂,有時會想找一個更為單純、直截了當的選項,一個能讓專注於寫作、創作教學內容和分享技術工具的平台,並且還能讓人偶爾釋放創意,自由調整網頁設計。
就像在沙漠裡漫長地行走了一個月,終於在眼前發現了一片令人驚喜的綠洲,在靜態網站生成器(static site generator)的世界裡發現了 Statamic 這個獨特的寶藏,為什麼 Statamic 之所以能像綠洲一樣吸引人呢,開啟 statamic.com 參觀一下。
純黑的背景當中,渾身色彩的公鹿,一些粉色強調配置,很容易就被吸引住。
Table of Contents
簡介
Statamic 是一種現代、乾淨且適應性強的內容管理系統 (CMS),可以在平面檔案 (flat files) 或資料庫上運行全端 (full-stack)、Headless、以及作為 Static Site Generator。
原來 Statamic 是一個完整的 CMS,又不需要資料庫,也可以當作靜態網站產生器,這太神奇了。
Statamic 是一個使用 PHP 語言開發的內容管理系統(CMS),但它有別於傳統的 CMS 平台。不同於依賴資料庫來儲存內容,Statamic 採用了文件基礎的方法,即所有的資料和設定都是儲存在簡單的 YAML 和 Markdown 文件中。這一點不僅使得整個系統更加靈活,也便於版本控制和資料遷移。
特色外掛 (Featured Addons)
就像 WordPress 擁有豐富的外掛庫,讓用戶可以添加各種功能和自訂其網站一樣,Statamic 也不例外。Statamic 的外掛生態系提供了一系列綜合性和專門性的解決方案,增強網站的功能性和靈活性。
比如說,如果你專注於網站的搜尋引擎優化(SEO),Statamic 有專為此目的設計的外掛,讓你能夠輕易地添加元標籤、創建網站地圖,以及實施其他多種 SEO 策略。
當然,如果你的網站是一個電子商務平台,Statamic 也有相應的外掛,如購物車和支付閘道整合,這讓你能夠輕鬆地設置一個功能全面的在線商店。
對於開發者來說,Statamic 不僅提供了 API 的廣泛支持,還有各種開發者工具和函式庫外掛,這些都大大提高了開發過程的效率和便捷性。
Statamic 最引人注目的是其極高的自訂性和靈活性。由於其模板引擎(稱為 Antlers)強大而靈活,您可以輕鬆地按照您自己的設計和需求來構建網站。同時,它提供了一套完善的 API 和擴充套件生態系統,使得開發者可以很方便地添加各種功能和整合其他服務。
在開發效率方面,Statamic 也有不少讓人欣賞的特點。它內置了一個用戶友好的控制面板,即使不是開發者的用戶也能輕易地管理網站內容和設定。更值得一提的是,Statamic 支持即時預覽和實時編輯,這表示您可以在編輯內容的同時,即時地看到它將如何在前端顯示。
入門套件 (Starter Kits)
Statamic Starter Kits 是一組預先配置和設計的網站模板,為使用 Statamic CMS 的開發者和設計師提供一個快速開始的基礎。這些 Starter Kits 通常會包括一系列基本的網站元素,例如主頁、關於我們頁、聯絡方式頁,以及可能還包括部落格、產品頁等。它們可能會配有預先設定的外掛、風格表(CSS)和其他前端資源。
節省時間:因為多數基本設定和頁面結構已經完成,所以你可以專注於添加特定功能或進行個性化設計。
最佳實踐:這些 Starter Kits 通常由經驗豐富的開發者製作,因此它們會包含當前的網頁設計和開發最佳實踐。
教育目的:對於初學者或是第一次使用 Statamic 的人來說,這些 Starter Kits 是了解 Statamic 功能和最佳實踐的好方法。
模塊化和可擴充性:許多 Starter Kits 設計得非常模塊化,這意味著你可以輕鬆地添加或移除特定功能或頁面。
總體來說,Statamic 是一個強大而靈活的 CMS 平台,非常適合那些尋求高度自訂性和開發效率的開發者和內容創作者。無論您是要建立一個簡單的部落格,還是一個功能豐富的企業網站,Statamic 都能讓您的開發過程變得更加簡單和高效。
開發環境
使用 Laravel Herd 在本機運行 Statamic 是最好、最簡單、最快的方法。也非常適合初學者。
沒錯,Statamic 背後的架構正好就是 Laravel,學習 PHP 程式語言是非常好的投資。
Laravel Herd 提供一種簡單的方法來設定您的機器,並自動安裝 PHP 開發所需的所有依賴項,例如 Web 伺服器和 Composer,當然還有 PHP 本身。
它容易使用,不易出錯,而且速度極快。這是在 Mac 上開始 Statamic 和 Laravel 開發的最好方式。
TailwindCSS
為了開發方便請在專案根目錄執行 npm run dev(需先執行過 npm install),之後就會自動編譯 CSS。
相關文章:
本篇文章內容參考 Statamic 入門教學,需要有基礎 PHP 和網頁開發技術,了解 command line 操作。
快速入門
安裝 Statamic 命令
composer global require statamic/cli
安裝後,您現在可以使用 statamic new 命令來啟動新的 Statamic 站點,並透過 CLI 設定精靈🧙♂️ 來引導您完成各種設定和選項。
這個 CLI 本質上是對 composer create-project 命令的一個超級精美的包裝。您可以選擇不安裝,但它提供了一系列非常簡潔的功能,還是推薦使用。
在終端機中,執行 statamic new try-statamic 並依照提示建立新網站。
statamic new try-statamic
接下來會請你建立管理者,請輸入 yes,輸入測試用的 email、name、password,完成。
進入 try-statamic 目錄,輸入以下指令
herd link
開啟網址 http://try-statamic.test
看到這個畫面,表示開發環境準備 Ready,困難的部分已經過去。
開啟控制面板 http://try-statamic.test/cp
輸入剛剛設定的帳號密碼,Statamic 旅程正式開始。
有點 WordPress 的感覺,但輕便很多,反應很快。
建立首頁
STEP 1.
STEP 2.
STEP 3.
首頁的 template 在這 resources/views/home.antlers.html,如下範例。
<h1 class="text-2xl font-bold my-6">歡迎光臨我的 Statamic 實驗站!</h1>
{{ content }}
{{ content }} 將會代換成實際內容。
儲存後即可看到變動。
修改佈局 Layout
Layout 是整個網站框架,預設在這個位置 resources/views/layout.antlers.html
<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title ?? site:name }}</title>
{{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body class="bg-gray-100 font-sans leading-normal text-gray-800">
<div class="mx-auto px-2 lg:min-h-screen flex flex-col items-center justify-center">
{{ template_content }}
</div>
<footer class="text-center p-4">
© {{ now format="Y" }}
</footer>
</body>
</html>
將佈局想像成一個相框,框架內從一個部分到另一個部分、從一頁到另一頁的所有變化都在框架中。
{{ template_content }} 會被取代成實際範本內容。
試試建個部落格
建立部落格有多容易?你馬上就會知道了。
以下是練習項目:
- 建立一個包含以下欄位的部落格,包含 title 、featured_image 、author 和 content
- 建立部落格索引頁,顯示近期文章清單
- 建立部落格文章頁面
- 將最新部落格文章清單新增至主頁
建立一個新文章集合
Statamic 預設已經有頁面集合(Pages),建立文章集合 (Posts) 後就是簡單的部落格網站囉。
產生基本網頁骨架
STEP 1.
STEP 2.
按下 [Create Views],將會產生 2 個範本檔案,等會兒用到。
resources/views/blog/index.antlers.html
resources/views/blog/show.antlers.html
配置文章欄位
設定發布日期
如果文章需要顯示發布日期,請在這裡啟用,不啟用也行。
Statamic 的精神是有需要的功能再打開,而 WordPress 比較像是功能都打開,不需要時請自己關閉。
設定文章網址結構
每一篇文章的網址,就像是 WordPress Permalink structure 設定。
文章 URL 樣式可以有多種設定,與 WordPress 設定方式相同。
設定上如有什麼疑問,請保持簡單,需要時再來設定。
建立第一篇文章
都是很基本的欄位,是不是非常簡潔,需要更多欄位,可以在後面的 Blueprint 設定。
來一點前端程式
現在是程式碼編輯器時間!將最近 5 篇文章的清單放到主頁上。
打開 resources/views/home.antlers.html,複製下面範例修改。
<h1 class="text-2xl font-bold my-6">歡迎光臨我的 Statamic 實驗站!</h1>
{{ content }}
<ul>
{{ collection:blog :limit="limit" }}
<li>
<a href="{{ url }}"
class="flex items-center justify-between p-5 border-t border-green-400 text-green-400 hover:text-green-900 hover:bg-green-400">
<span class="mx-8">{{ title }}</span>
<span class="text-green-900 text-sm">{{ date }}</span>
</a>
</li>
{{ /collection:blog }}
</ul>
這段程式主要利用 Collection Tag 標籤,讀取文章集合並限制最大數量為 5,如下範例。
{{ collection:blog limit="5" }}
<a href="{{ url }}">{{ title }}</a>
{{ /collection:blog }}
修改文章網頁範本
這個範本就是控制每一篇文章如何顯示的範本,一個非常簡單的片段,您可以自行修改,看看資料的變化。
<h1 class="text-3xl bg-green-400 text-center text-green-900 font-bold mt-6 p-6">{{ title }}</h1>
<div class="border text-center text-green-600 border-green-400 mt-8 p-3 text-xs uppercase">
Published on {{ date }} by {{ author:name }}
</div>
<article class="space-y-4 mt-8 text-sm text-black-400 leading-loose">
{{ content }}
</article>
部落格索引頁
接下來,讓我們來製作部落格索引頁。返回控制面板並轉到頁面集合 (Pages Collection)。建立一個新頁面並將其命名為“部落格文章清單”,將模板設定為 blog/index.html
返回程式碼編輯器 – 開啟 resources/views/blog/index.antlers.html 範本並放入此程式碼片段。
<h1 class="text-2xl font-bold my-6">{{ title }}</h1>
{{ content }}
<ul>
{{ collection:blog :limit="limit" }}
<li>
<a href="{{ url }}"
class="flex items-center justify-between p-5 border-t border-green-400 text-green-400 hover:text-green-900 hover:bg-green-400">
<span class="mx-8">{{ title }}</span>
<span class="text-green-900 text-sm">{{ date }}</span>
</a>
</li>
{{ /collection:blog }}
</ul>
這裡也是放了最新 5 篇文章清單,有沒有發現顯示最近的文章清單,是重複使用的程式碼片段,下一節說明如何處理重複。
建立可重複使用的片段 (partial)
partial 是可重複使用的模板區塊。在 resources/views/blog/ 目錄中建立一個名為 _listing.antlers.html 的新檔案。
在模板前面新增底線是一種常見的約定,以表示它是可重複使用的部分,而不是完整佈局。您也可以建立一個名為 partials 的子目錄,將 partials 集合在一起管理。
{{ slot }}
<ul>
{{ collection:blog :limit="limit" }}
<li>
<a href="{{ url }}"
class="flex items-center justify-between p-5 border-t border-green-400 text-green-400 hover:text-green-900 hover:bg-green-400">
<span class="mx-8">{{ title }}</span>
<span class="text-green-900 text-sm">{{ date }}</span>
</a>
</li>
{{ /collection:blog }}
</ul>
現在可以在部落格索引頁中,改成使用 partial 的方式
<h1 class="text-2xl font-bold my-6">{{ title }}</h1>
{{ content }}
{{ partial:blog/listing }}
{{# 這裡會取代 Slot #}}
<h2 class="p-5">所有文章 (blog/index)</h2>
{{ /partial:blog/listing }}
加上選單
我們可以使用 Nav 標籤取得 Pages 集合中的所有頁面。
<nav class="bg-black text-xs uppercase text-green text-center flex items-center justify-center space-x-4">
{{ nav from="pages" include_home="true" }}
<a href="{{ url }}" class="p-2 block hover:text-yellow-200 text-white">{{ title }}</a>
{{ /nav }}
</nav>
將上面範例放到 layout.antlers.html 中,所有的頁面都會出現這個選單。
客製藍圖 (Blueprint)
現在來建立一個名為 featured_image 的新欄位,類似 WordPress 精選圖片。
STEP 1.
STEP 2.
STEP 3.
Statamic 有超過 40 種 field type,這裡選擇 Assets,可以用來上傳圖片。
STEP 4.
接下來,將該欄位的顯示名稱指定為“Featured Image”,Handle 會自動被標記為 featured_image。這將是在範本中用於獲取資產資料的變數名稱。將「最大檔案數」設為 1,按一下「完成」。
返回您的部落格集合並編輯文章(如果您願意,也可以建立一個新條目),您會在那裡看到新的欄位。上傳您電腦上的任何圖像。
將滑鼠懸停在新圖像的縮圖上,然後按一下,在那裡可以對圖像進行一些調整 – 例如設定 Alt 標籤。
完成後,儲存並發布您的變更。
連接精選圖片
回到程式碼編輯器中的 resources/views/blog/show.antlers.html。將以下程式碼片段新增至模板中您想要的任何位置。在 {{ content }} 變數之前或之後可能是一個好地方。
<img src="{{ featured_image }}" class="border-2 border-green-400 p-1" alt="{{ featured_image:alt }}" />
刷新頁面,就是一個基本但功能齊全的網站,這個簡單的入門能幫助了解控制面板和前端之間的關係。您還可以做很多事情,例如添加分類、表單、動態圖像處理、透過 Content API 使用 JavaScript 獲取資料等等。
成果發表
最後
基於 CMS 功能的比較和擴充方面的比較,很難說明有什麼很大的差異,但在工程的角度比對,這兩個有非常大的架構差異.
Statamic 基於 Laravel,熟悉 Laravel 開發的工程師應該是秒懂 Statamic,而 WordPress 的主題或外掛開發,就算很熟悉 PHP,還是得先了解 WordPress 底層架構才能開發主題或外掛。
功能/方面 | Statamic | WordPress |
---|---|---|
基於 | Laravel 框架 | PHP |
資料庫需求 | 扁平文件,但可以使用像是 MySQL 的資料庫 | 主要是 MySQL |
授權 | 開源,免費,也有商業版本。 | 開源,免費 |
擴充性 | 透過外掛程式 | 透過插件和主題 |
模板語言 | Antlers | PHP,具有一些模板支援 |
內建版本控制 | 是 | 透過插件提供 |
內容結構 | 集合和分類等等 | 文章、頁面、自訂文章類型等等 |
電子商務支援 | 通過外掛程式 | 通過 WooCommerce 和其他外掛 |
效能 | 由於扁平文件結構,通常更快 | 可能需要緩存插件以提高效能 |
學習曲線 | 中等,特別是如果熟悉 Laravel | 簡單到中等 |
SEO 能力 | 內建和通過外掛程式 | 主要通過如 Rank Math 等 SEO 外掛 |
多語言支援 | 內建 | 透過插件外掛 |
社群和支援 | 較小的社群,但在成長;提供付費支援 | 大社群;眾多論壇和教程 |
安全性 | 由於基於 Laravel,一般來說具有更多內建安全功能 | 基於多數用戶量,目標攻擊較多,但有許多安全插件可用 |
效能和安全性還有簡潔是最大的差異,WordPress 一開始就給你一大堆功能,有名的外掛也是,很多時候我們自己都不完全清楚背後在跑什麼東西。
至於新手友好,當然還是 WordPress,它就是希望能只經由後台介面,就能創造各式各樣的網站,同時不讓你看到太多技術細節。
Statamic 只有最基本的功能,想要什麼自己加,其它靜態網站工具也是如此,所以簡便快速安全。