次世代 Hugo

無駄を削ぎ、本質を研ぐ

建立 Starter Theme

Sam Xiao's Avatar 2025-07-09

Starter Theme 為最簡單的 Theme，但已經整合 SCSS 與 JavaScript，並支援每個 Template 與 Partial 都有獨立 SCSS 與 JavaScript，可藉此學習 Theme 的基本架構。

Version

Hugo 0.147.8

Theme Structure

starter-theme
├── assets
├── layouts
├── static
└─── hugo.toml
  • assets：放置要經過 Hugo pipe 壓縮的檔案，如自己寫的 SCSS 與 JavaScript
  • layouts : 放置 template 與 partial
  • static : 放置不需經過 Hugo pipe 處理的檔案，Hugo 只會做單純 copy 到 public 目錄，如由 NPM 安裝的套件，可將其放在 static 目錄下
  • hugo.toml : Hugo 設定檔

Assets

assets/
├── scss/
│   ├── main.scss
│   ├── _vars.scss
│   ├── _baseof.scss
│   ├── _home.scss
│   ├── _single.scss
│   ├── _list.scss
│   ├── _partials/
│   │   ├── _header.scss
│   │   └── _footer.scss
│   ├── page/
│   │   └── _about.scss
└── js/
    ├── main.js
    ├── _home.js
    ├── _single.js
    ├── _list.js
    └── page/
        └── _about.js
  • scss：SCSS 目錄
    • main.scss：全站 SCSS，負責 @import 其他 SCSS
    • _var.scss：全站 SCSS 變數
    • _baseof.scss：所有 template SCSS
    • _home.scss：首頁 template SCSS
    • _single.scss：單筆文章 template SCSS
    • _list.scss：文章清單 template SCSS
    • _partials：partial 目錄
      • header.scss：頁首 partial SCSS
      • footer.scss：頁尾 partial SCSS
    • page：特殊 template 目錄
      • about.scss：特殊頁面 tempate SCSS
  • js：JavaScript 目錄
    • main.js：全站 JavaScript
    • _home.js：首頁 template JavaScript
    • _single.js：單筆文章 template JavaScript
    • _list.js：文章清單 template JavaScript
    • page：特殊 template 目錄
      • about.js：特殊頁面 tempate JavaScript

Layouts

layouts/
├── baseof.html
├── home.html
├── single.html
├── list.html
├── _partials/
├───── css.html
├───── js.html
├───── header.html
├───── footer.html
├── page/
└───── about.html
  • baseof.html：所有 template 的基本樣板，可調用其他 block 與 partial
  • home.html：首頁 template
  • single.html：單筆文章 template
  • list.html：文章清單 template
  • _partials：partial 目錄
    • css.html：載入 CSS partial
    • js.html：載入 JavaScript partial
    • header.html：頁首 partial
    • footer.html：頁尾 partial
  • page：特殊 template 目錄
    • about.html：特殊頁面 template

Static

static/
└── favicon.icon
  • favicon：提供網站 icon

Hugo Config

hugo.toml

name = 'starter theme'
  • 提供 theme 的設定檔

Conclusion

  • Starter Theme 雖然精簡，但已經支援 W3C 三本柱 HTML/CSS/JavaScript，亦整合 SCSS，且每個 template 或 partial 都有獨立 SCSS 與 JavaScript，只要依照這個架構繼續開發，就可保證專案可長可久，不用擔心技術變化導致專案無法維護

# Hugo