點燈坊

失くすものさえない今が強くなるチャンスよ

為什麼該將 HTML 寫在 themes 而非 layouts?

Sam Xiao's Avatar 2024-01-18

Hugo 提供兩個目錄讓我們放 HTML Template:layoutsthemes,若該專案只是自己使用,並沒有想發布主題,或許你會想將所有 HTML Template 寫在 layouts 即可,但實務上仍建議寫在 themes 底下。

Version

Hugo 0.121.1

Layouts

先來談談 Hugo 設計 layouts 目錄的初衷

  • Hugo 使用一定要搭配一個 Theme,若你想 修改 某個 theme,並不建議你直接修改 themes 目錄下的檔案,類似你不應該修改 node_modules 下的檔案一樣

  • Hugo 的解決方案是另外提供 layouts 目錄,該目錄下的檔案將 覆蓋 themes 目錄下的檔案,類似 CSS 的 !important 一樣

Themes

若我不想發布 theme 呢?

  • 理論上是可以將所有 HTML template 都寫在 layouts 目錄下,並不影響實際使用

如何解決更換版型的老問題?

  • 實務上使用 JAMStack 的經驗,markdown 部分只會新增或修改 content,但 front matter 則幾乎不會修改,但版型部分則可能常常修改,傳統 CSS 教我們只要換 CSS 即可,HTML 可完全不變,但這在實務上卻很難做到,因為 HTML 與 CSS 常常要配套進行修改

  • 若 HTML 與 CSS 都要修改,實務上常用的方法是配合 Git 的 branch,但這又可能造成連 markdown 也順便一起被 Git 管理的老問題,造成各 branch 的 markdown 檔案並不同步

使用 theme 管理不同版型

  • 既然不同版型常常 HTML 與 CSS 都要修改,乾脆將不同 HTML 與 CSS 以 theme 管理,如此要切換不同版型只要在 hugo.json 內切換 theme 即可,且不同版型還可以有自己的設定檔,不會污染了共用的 hugo.json
  • 也不必再使用 Git branch 管理不同版型,造成各 branch 的 markdown 不同步

Conclusion

  • Theme 算是解決 切換版型 這個老問題的最佳方案,也不必動用到 Git branch
  • 由於提早將 layout 與 content 切開,將來要發布成 theme 也更加方便