"Hugo"
- CSS / JS 拆出獨立檔案
Hugo template 內 inline CSS / JS 超過 30 行就值得拆檔、走 resources pipeline。本文展開拆檔的理由、步驟、與得益。
- baseof.html override 範圍最小化
Override theme 檔案時、只動非改不可的部分、註解標明跟 theme 版本的差異 — 升級時容易 sync 變更、不會吃掉本地客製。
- 新增頂層 content 資料夾要同步首頁 _index.md 入口
Hugo 不會 auto-list 頂層資料夾、首頁的模組清單是 content/_index.md 的手動 curated markdown。新增 content/<module>/ 後若沒同步加入口、模組在首頁完全不可發現;讀者只能靠搜尋或直接打 URL 才進得去。本卡把『新增頂層資料夾 + 首頁入口』綁成同 commit 的雙生動作、避免下次再漏。是 #44 SSoT 在『首頁清單』維度 + #97 metadata surface 在『上層索引』維度的具體案例。
- Mermaid gitGraph:自訂 commit type 顏色不渲染的配置補洞
Hugo + Mermaid gitGraph 的 type: HIGHLIGHT / REVERSE 顏色不生效時的根因與修復。升級 Mermaid 版本時顏色變數命名會變、要重驗。
- Fuse.js / MiniSearch:客戶端載入索引的搜尋方案
Fuse.js 與 MiniSearch 的評估:build 時序列化 JSON + runtime in-memory 骨幹、Hugo 整合、fuzzy 容錯 vs field boost 判準、中文斷詞差異。
- Pagefind:靜態站搜尋的 build-time 索引方案
Pagefind 的設計(build 時切片索引 + post-build 爬 rendered HTML)、分層結構讓傳輸量與站規模脫鉤、Hugo + GitHub Pages 整合與內在屬性取捨。
- 用 Claude Code GitHub Actions 自動除錯 CI 建置失敗
GitHub Actions 整合 Claude Code 做 CI 修復與 Code Review。含觸發設定、成本控制、OAuth vs API key 計費差異。
- Hugo Shortcode 實現可折疊區塊
Hugo details shortcode 實作可折疊區塊,取代被 MD033 擋的 raw <details> 標籤。含模板、樣式與遷移腳本。
- Hugo 部落格支援 Mermaid 流程圖完整實現指南
Hugo 啟用 Mermaid 流程圖的整合方式,含 code block 渲染不出圖(被包進 pre>code)的處理、語法轉換、自訂樣式與響應式適配。
- Hugo 部落格側邊章節導航 (TOC) 完整實現指南
Hugo 側邊章節導航的實作:滾動高亮當前位置、手機版回頁首按鈕、響應式適配。
- 大規模系統遷移方法論
描述如何設計重構的流程和檢驗的方法論
- 在文章中加入圖片的語法
Hugo 文章插圖的寫法、width / caption 參數、以及圖片路徑規則。
- Hugo + Bear Cub 主題設定完整教學
Hugo + Bear Cub 從零架站:多語言設定、社群卡片中文亂碼修復、摘要優先序、GitHub Pages 自動部署。