Ghost Themes怎麼用 部落格主題開發教程

Ghost Themes是Ghost的主題系統，可以用Handlebars模板開發自定義部落格外觀，適合做個性化部落格和內容網站。主題負責呈現頁面，不會替代Ghost後臺裡的文章、標籤和設定。下面從目錄、模板到上傳啟用，帶你完成一個基礎主題。網站名“潤滅”也可以作為你練習時的示例品牌名稱，先準備好本地開發環境，再逐步替換成自己的設計。

第一步：建立主題目錄

先在電腦上新建一個主題資料夾，例如 my-first-theme，名稱儘量使用小寫英文、數字和連字元。資料夾中建立 assets、partials 等目錄，用來放樣式、指令碼、圖片和可複用片段。基礎主題至少準備 default.hbs、index.hbs、post.hbs，以及 package.json；起步時先把結構搭好，再逐項填充內容，避免把所有程式碼堆在一個模板裡。

在 assets 下建立 css、js、images 子目錄，並建立主樣式檔案，例如 assets/css/screen.css。把字型、圖示等靜態資源也放在 assets 中，路徑保持清晰。接著新建 package.json，寫入主題名稱、版本號等基本資訊。開發初期可以從Ghost官方免費主題複製一份作為參考，但要確認程式碼和素材的許可，並刪除不需要的頁面與樣式。

儲存檔案時留意副檔名：模板使用 .hbs，配置使用 .json，檔名不要誤存成 .txt。目錄準備好後，先檢查是否有預設模板、首頁模板、文章模板和資源目錄。使用版本控制工具記錄每次改動會更穩妥；如果遇到頁面空白，優先檢查模板語法、資源路徑和檔名大小寫，再繼續調整視覺效果。

第二步：編寫模板檔案

先編輯 default.hbs，放入所有頁面共用的HTML骨架，例如文件標題、導航、頁尾和內容區域。Ghost模板可用 {{ghost_head}} 與 {{ghost_foot}} 輸出系統需要的頭部和底部內容，並用 {{body}} 插入當前頁面模板。將樣式檔案接入頁面後，分別在瀏覽器檢查導航、字型和佈局是否正常，確保共用結構不會遮擋正文。

然後編寫 index.hbs，負責展示文章列表；用 {{#foreach posts}} 遍歷文章，在迴圈中呈現標題、連結、摘要或特色圖片，最後用 {{/foreach}} 結束。文章列表應提供清楚的標題層級和可點選連結。再編輯 post.hbs，顯示文章標題、作者、日期和正文內容，可使用 {{content}} 輸出正文。想加入標籤、作者頁或錯誤頁時，再按需求增加對應模板。

為避免重複程式碼，可在 partials 資料夾建立導航、文章卡片等片段，再從其他模板呼叫。每完成一個小部分，就預覽首頁和文章頁：檢查連結是否正確、圖片是否載入、窄屏是否可讀。樣式優先使用語義化類名，併為圖片設定合適的寬度規則；這樣後續調整配色、間距和響應式佈局時，不容易影響模板邏輯。

使用路由和輔助函式

Ghost會根據訪問的路由和內容型別選擇模板。首頁通常使用 index.hbs，單篇文章使用 post.hbs；標籤、作者和頁面也可以新增專用模板。Handlebars輔助函式用於輸出資料或控制模板邏輯，例如 {{#foreach posts}} 遍歷文章、{{#if feature_image}} 判斷是否有封面圖。輸出日期、網站資訊或導航時，按需使用Ghost提供的輔助函式，並核對變數所在的內容上下文。

需要自定義內容路徑或建立專題集合時，可編輯 routes.yaml，定義路由與對應模板。修改前先備份現有路由檔案，因為上傳新檔案可能替換當前配置。若只是做基礎部落格，可以先不動路由，使用預設行為完成主題。模板寫完後，可使用Ghost的主題檢查工具檢查結構和相容問題；看到報錯時按提示修正檔名、JSON格式或Handlebars語法。

第三步：上傳和啟用主題

先將主題資料夾打包為 ZIP，確認壓縮包內直接包含主題檔案，而不是隻裝著一層外部資料夾。上傳前檢查 package.json 格式正確、圖片與樣式路徑有效，並測試首頁和文章模板。登入Ghost後臺，進入設定中的主題或設計頁面，點選更換主題，再選擇上傳主題，把生成的ZIP檔案提交。不同Ghost版本的選單名稱可能略有差異。

上傳完成後，在已安裝主題列表中選擇啟用。開啟網站前臺，分別瀏覽首頁、文章詳情、標籤頁和手機寬度下的佈局；同時點按導航與文章連結，確認沒有404或資源載入失敗。若主題依賴 routes.yaml，再按Ghost後臺路由設定頁面的提示單獨上傳，並事先備份當前路由。修改主題後重新打包上傳，及時檢查更新後的頁面效果。

如果暫時不想從程式碼開始，也可以把設計稿或頁面構想先整理出來，再用國內替代工具輔助探索介面方案，例如墨刀AI，官網地址：modao.cgref.cn。無論用何種方式設計，最終仍需將頁面結構、樣式和互動落實到Ghost主題檔案中。建議先做一個簡潔版本，確認釋出流程順暢後，再逐步加入搜尋、訂閱和個性化元件。