次世代 Hugo

智能を研ぎ、創造を編む

網站變數簡介

Sam Xiao's Avatar 2026-06-21

我們可以在 config.toml 定義網站變數，並透過 Go Template 語言存取。

版本

Hugo 0.163.3

網頁

overview01

  • 標題 與 標語 皆讀取自 config.toml 的網站變數

Hugo 設定

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

[params]
slogan = "Stay Hungry, Stay Foolish"
  • title：Hugo 定義的預設網站變數，位於 root level 屬性
  • slogan：使用者自訂的網站變數，位於 params 屬性

版面配置

layouts/home.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ $title := "Hugo Lab" }}
    {{ $css := resources.Get "css/style.css" | minify }}
    <link rel="stylesheet" href="{{ $css.RelPermalink }}" />
    <title>{{ $title }}</title>
  </head>
  <body>
    <h1 class="site-title">{{ .Site.Title }}</h1>
    <p class="slogan">{{ .Site.Params.Slogan }}</p>
  </body>
</html>

9 行

<title>{{ .Title }}</title>
  • .Title：使用 . 加上 大駝峰命名 法存取 預設頁面變數

12 行

<h1 class="site-title">{{ .Site.Title }}</h1>
<p class="slogan">{{ .Site.Params.Slogan }}</p>

  • .Site.Title：同樣使用 .Site. 加上 大駝峰命名法 存取 預設 網站變數

  • .Site.Params.Slogan：使用 .Site.Params. 加上 大駝峰命名法 存取使用者 自訂 的網站變數

assets/css/style.css

.site-title {
  font-size: 2.25rem;
  font-weight: 700;
}

.slogan {
  color: #ef4444;
}

結論

  • 在 config.toml 定義的網站變數，可以在 Go Template 中透過 .Site 存取
  • 網站 預設變數，在 Go Template 可直接透過 .Site 存取
  • 網站 自訂變數，在 Go Template 可直接透過 .Site.Params 存取

# Hugo