次世代 Hugo

無駄を削ぎ、本質を研ぐ

將 Theme 架構轉移成 Themeless 架構

Sam Xiao's Avatar 2025-12-13

原本使用 Theme 開發，或想將別人開發的 Theme 改成 Themeless 架構，只需做少許的改變即可。

Version

Hugo 0.152.2

Directories

將原本主題下的以下目錄直接轉移到專案根目錄。

  • layouts：最重要的核心，HTML Template
  • static：外部 CSS、 外部 JS, 外部圖片等靜態檔案
  • assets：使用 Hugo Pipes 處理 CSS、SCSS 或 JavaScript
  • archetypes：Content Template
  • i18n：多語言設定檔
  • data：自訂資料檔

Configuration

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My Site'

[params.css]
files = [
  "css/vars.css",
  "css/reset.css",
  "css/baseof.css",
  "css/home.css",
  "css/single.css",
  "css/list.css",
  "css/_partials/header.css",
  "css/_partials/footer.css",
  "css/page/about.css",
]

Line 1

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My Site'
  • 將原本 theme 那一行刪除，因為已經不需要設定主題了

Line 4

[params.css]
files = [
  "css/vars.css",
  "css/reset.css",
  "css/baseof.css",
  "css/home.css",
  "css/single.css",
  "css/list.css",
  "css/_partials/header.css",
  "css/_partials/footer.css",
  "css/page/about.css",
]
  • 將原本主題內 hugo.toml 或 theme.toml 或 config.toml 的 params 部分搬到專案自己的 hugo.toml

Remove Theme

  • 檔案與設定都搬過來後，可直接刪除 themes 目錄

Conclusion

  • 若只是一個人開發，其實 Themeless 架構是最舒服的，不會有 layout override 問題，也不會有專案與主題都有 configuration 問題，適合需要 長期維護與 高度客製化 網站

# Hugo