Hugo 提供兩個目錄讓我們放 HTML Template:layouts
與 themes
,若該專案只是自己使用,並沒有想發布主題,或許你會想將所有 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 也更加方便