次世代 Hugo

無駄を削ぎ、本質を研ぐ

建立頁面基礎 Template

Sam Xiao's Avatar 2025-07-16

Hugo 預設以 baseof.html 提供所有頁面基礎 Template，並搭配 _baseof.scss。

Version

Hugo 0.148.0

Baseof Template

layouts/baseof.html

<!doctype html>
<html lang="en">
  <head>
    {{ partial "css.html" . }}
  </head>
  <body>
    {{ block "main" . }}{{ end }}
    {{ partial "js.html" . }}
  </body>
</html>
  • 所有 template 基礎的 baseof.html

Line 3

<head>
  {{ partial "css.html" . }}
</head>
  • 在 <head> 內引用 css partial

Line 6

<body>
  {{ block "main" . }}{{ end }}
  {{ partial "js.html" . }}
</body>
  • 在 <body> 內引用 main block 與 js partial

Baseof Style

assets/scss/_baseof.scss

@use 'vars';

body {
  color: vars.$body-color;
  background: vars.$body-background-color;
  font-family: sans-serif;
}
  • 所有 template SCSS

Conclusion

  • baseof.html 相當精簡，只包含 css partial、 main block 與 js partial
  • assets/scss 與 layouts 下的目錄架構完全相同
  • baseof.html 對應 _baseof.scss 方便維護，不必將所有 SCSS 都寫在 main.scss 內

# Hugo