Ghost CMS

用 Claude Code 幫 Ghost CMS 加上推薦閱讀區塊

推薦閱讀不只是「最新文章」，應該是「跟這篇有關的文章」。本文示範如何讓 Claude Code 直接修改 Ghost 主題模板，實現依 tag 的智慧推薦。

CL HSIEH

— 閱讀時間 5 分鐘
分享
用 Claude Code 幫 Ghost CMS 加上推薦閱讀區塊
Photo by Giulia Bertelli on Unsplash

Ghost CMS 的 Source 主題預設就有「Read more」區塊，但仔細看它的邏輯——它只是抓最新的 3 篇文章，跟當前文章的主題毫無關聯。一篇講 Python 的文章，底部跑出一篇講咖啡的推薦，這不是推薦，這是亂數。

這篇文章記錄如何讓 Claude Code 幫我修掉這個問題：把推薦邏輯從「最新文章」改成「同 tag 文章」，整個過程不需要下載主題、不需要手動編輯檔案、也不需要進 Ghost 後台。

Ghost 推薦閱讀的運作原理

Ghost 的 Handlebars 模板提供一個 {{#get}} helper，可以直接在主題模板裡查詢 Ghost 的資料——文章、標籤、作者都可以。推薦閱讀區塊就是利用這個 helper，在 post.hbs 底部加入一段查詢邏輯。

Source 主題原本的寫法：

{{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}}
    {{! 顯示文章卡片 }}
{{/get}}

這段程式碼的意思是：「取得所有文章，排除目前這篇，顯示 4 篇」。沒有任何主題相關性，純粹依時間排序。

改成依 tag 篩選的寫法：

{{#get "posts" include="authors" filter="tags:[{{post.tags}}]+id:-{{post.id}}" limit="3" as |next|}}
    {{! 顯示文章卡片 }}
{{/get}}

多了 tags:[{{post.tags}}] 這個 filter，Ghost 會找出所有跟目前文章共享至少一個 tag 的文章，再排除自己，顯示最多 3 篇。這才是真正有意義的推薦。

為什麼不直接進後台改？

Ghost 後台的「Code Injection」只支援 HTML、CSS 和 JavaScript，不支援 Handlebars 語法。Handlebars 是 Ghost 的伺服器端模板語言，只能存在於主題的 .hbs 檔案中，在瀏覽器執行前就已經被伺服器處理完畢。

所以要改推薦邏輯，必須直接修改主題檔案 post.hbs。這通常意味著：下載主題 ZIP、解壓縮、修改、重新打包、重新上傳——步驟繁瑣，而且容易出錯。

Claude Code 的做法：直接進容器

因為 Ghost 架設在 Zeabur 上，Zeabur CLI 提供了 service exec 指令，可以直接在執行中的容器裡執行命令。Claude Code 利用這個能力，繞過了整個「下載→修改→上傳」的流程。

整個修改過程分三步：

第一步：找到主題位置

npx zeabur@latest service exec --id <ghost-service-id> --   find /var/lib/ghost/current/content/themes -name 'post.hbs'

Ghost 的主題存放在容器的 /var/lib/ghost/current/content/themes/ 目錄下。找到 Source 主題的 post.hbs 路徑後，就可以直接操作。

第二步：用 Node.js 修改檔案

Ghost 容器內建 Node.js（因為 Ghost 本身就是 Node 應用），所以可以直接在容器內執行 Node 腳本來修改檔案：

npx zeabur@latest service exec --id <ghost-service-id> -- node -e "
const fs = require('fs');
const path = '/var/lib/ghost/current/content/themes/source/post.hbs';
let content = fs.readFileSync(path, 'utf8');
content = content.replace(
  'filter="id:-{{post.id}}" limit="4"',
  'filter="tags:[{{post.tags}}]+id:-{{post.id}}" limit="3"'
);
fs.writeFileSync(path, content, 'utf8');
console.log('done');
"

這段腳本讀取 post.hbs，用字串替換更新 filter 條件，再寫回去。整個過程在容器內部完成，不需要任何檔案傳輸。

第三步：重啟服務

npx zeabur@latest service restart --id <ghost-service-id>

Ghost 會在重啟時重新讀取主題檔案，修改立即生效。

效果：推薦變精準了

改完之後，文章底部的「Read more」區塊會顯示與當前文章共享相同 tag 的文章。寫 Ghost CMS 的文章，推薦的就是其他 Ghost 相關文章；寫 Claude Code 的，推薦的就是 AI 工具相關文章。

這個邏輯有一個邊緣情況：如果某篇文章沒有設定 tag，或所有 tag 文章只有這一篇，區塊就不會顯示。這是合理的行為——沒有相關文章就不顯示，比隨機推薦更誠實。

FAQ

Q：這樣修改容器內的檔案，重新部署後會不會被覆蓋？

這取決於 Zeabur 的部署設定。如果 Ghost 的 content 目錄掛載了持久化 Volume，修改會保留；如果是純容器映像檔，重新部署後可能還原。建議確認 Zeabur 專案是否有 Volume 掛載，或考慮將修改後的主題透過 Ghost Admin 上傳，作為持久化備份。

Q：除了推薦閱讀，還有哪些主題設定可以這樣改？

所有 .hbs 模板檔案都可以用相同方式修改，例如頁首（default.hbs）、文章列表（index.hbs）、標籤頁（tag.hbs）。只要是 Handlebars 模板層的邏輯，都可以透過這個方式調整。

Q：Source 主題以外的主題也適用嗎？

邏輯完全相同，但具體的 HTML 結構和 CSS class 名稱會不一樣。不同主題的 post.hbs 裡，負責顯示文章卡片的 partial 名稱可能是 post-card、loop-grid 或其他名稱，需要先閱讀主題原始碼確認。

結語

「推薦閱讀」這個功能說小不小——它影響讀者在你網站上的停留時間，也影響他們對你內容的整體印象。Ghost 的 Source 主題雖然內建了這個區塊，但預設的實作並不夠聰明。

用 Claude Code 直接進容器修改主題，整個流程不到 5 分鐘，省去了手動處理主題檔案的繁瑣。現在的 AI 真的是超級厲害，省去了開好幾個分頁貼來貼去的麻煩，讚！

Read more