HUGO
Menu
GitHub 87548 stars Mastodon

Hugo 模板類型

創建不同類型的模板來渲染您的內容、資源和數據。

結構

在項目的根目錄中的 layouts 目錄中創建模板。

雖然您的網站可能不需要每個這些模板,但下面的示例是中等復雜度網站的典型示例。

layouts/
├── _markup/
│   ├── render-image.html   <-- 渲染鉤子
│   └── render-link.html    <-- 渲染鉤子
├── _partials/
│   ├── footer.html
│   └── header.html
├── _shortcodes/
│   ├── audio.html
│   └── video.html
├── books/
│   ├── page.html
│   └── section.html
├── films/
│   ├── view_card.html      <-- 內容視圖
│   ├── view_li.html        <-- 內容視圖
│   ├── page.html
│   └── section.html
├── baseof.html
├── home.html
├── page.html
├── section.html
├── taxonomy.html
└── term.html

Hugo 的 模板查找順序 確定模板路徑,允許您為任何頁面創建獨特的模板。

在創建模板時,您必須徹底了解模板查找順序。模板選擇基於模板類型、頁面種類、內容類型、部分、語言和輸出格式。

下面描述了每種模板類型的目的。

基礎

基礎 模板作為其他模板可以構建的基礎布局。它通常定義 HTML 的常見結構組件,如 htmlheadbody 元素。它還經常包括在網站多個頁面中出現的重復功能,如頁眉、頁腳、導航和腳本引用。通過在 基礎 模板中定義這些常見方面,您避免了冗余,確保了一致性,並簡化了網站的維護。

Hugo 可以將 基礎 模板應用於以下模板類型:homepagesectiontaxonomytermsinglelistall。當 Hugo 解析任何這些模板類型時,只有在被解析的模板滿足這些特定條件時才會應用 基礎 模板:

  • 它必須包含至少一個 define 動作
  • 它只能包含 define 動作、空白和 模板注釋。不允許其他內容。

如果模板不符合所有這些標准,Hugo 會按原樣執行它,而不應用 基礎 模板。

當 Hugo 應用 基礎 模板時,它會用應用於基礎模板的模板中相應的 define 動作的內容替換其 block 動作。

例如,下面的 基礎 模板調用 partial 函數來包含 headheaderfooter 元素。block 動作充當佔位符,其內容將被應用於基礎模板的模板中匹配的 define 動作替換。

layouts/baseof.html
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <header>
    {{ partial "header.html" . }}
  </header>
  <main>
    {{ block "main" . }}
      這將被應用於基礎模板的模板中
      相應的 "define" 動作的內容替換。
    {{ end }}
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>
layouts/home.html
{{ define "main" }}
  這將替換基礎模板中 "block" 動作的內容。
{{ end }}

Home(主頁)

home 模板渲染網站的主頁。

例如,Hugo 將 基礎 模板應用於下面的 home 模板,然後渲染頁面內容和網站常規頁面的列表。

layouts/home.html
{{ define "main" }}
  {{ .Content }}
  {{ range .Site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。

Page(頁面)

page 模板渲染常規頁面。

例如,Hugo 將 基礎 模板應用於下面的 page 模板,然後渲染頁面標題和頁面內容。

layouts/page.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

Section(部分)

section 模板渲染 部分 內頁面的列表。

例如,Hugo 將 基礎 模板應用於下面的 section 模板,然後渲染頁面標題、頁面內容和當前部分中頁面的列表。

layouts/section.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。

Taxonomy(分類法)

taxonomy 模板渲染 分類法 中術語的列表。

例如,Hugo 將 基礎 模板應用於下面的 taxonomy 模板,然後渲染頁面標題、頁面內容和當前分類法中 術語 的列表。

layouts/taxonomy.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。

taxonomy 模板中,Data 對象提供這些特定於分類法的方法:

Terms 方法返回 分類法對象,允許您調用其任何方法,包括 AlphabeticalByCount。例如,使用 ByCount 方法渲染按與每個術語關聯的頁面數量排序的術語列表:

layouts/taxonomy.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Data.Terms.ByCount }}
    <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
  {{ end }}
{{ end }}

Term(術語)

term 模板渲染與 術語 關聯的頁面列表。

例如,Hugo 將 基礎 模板應用於下面的 term 模板,然後渲染頁面標題、頁面內容和與當前術語關聯的頁面列表。

layouts/term.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。

term 模板中,Data 對象提供這些特定於術語的方法:

Single(單個)

single 模板是 page 模板的回退。如果 page 模板不存在,Hugo 將查找 single 模板。

例如,Hugo 將 基礎 模板應用於下面的 single 模板,然後渲染頁面標題和頁面內容。

layouts/single.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

List(列表)

list 模板是 homesectiontaxonomyterm 模板的回退。如果這些模板類型之一不存在,Hugo 將查找 list 模板。

例如,Hugo 將 基礎 模板應用於下面的 list 模板,然後渲染頁面標題、頁面內容和頁面列表。

layouts/list.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

All(全部)

all 模板是 homepagesectiontaxonomytermsinglelist 模板的回退。如果這些模板類型之一不存在,Hugo 將查找 all 模板。

例如,Hugo 將 基礎 模板應用於下面的 all 模板,然後根據其頁面種類有條件地渲染頁面。

layouts/all.html
{{ define "main" }}
  {{ if eq .Kind "home" }}
    {{ .Content }}
    {{ range .Site.RegularPages }}
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ end }}
  {{ else if eq .Kind "page" }}
    <h1>{{ .Title }}</h1>
    {{ .Content }}
  {{ else if in (slice "section" "taxonomy" "term") .Kind }}
    <h1>{{ .Title }}</h1>
    {{ .Content }}
    {{ range .Pages }}
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ end }}
  {{ else }}
    {{ errorf "不支持的頁面種類:%s" .Kind }}
  {{ end }}
{{ end }}

Partial(部分)

部分 模板通常用於渲染網站的組件,盡管您也可以創建返回值的 部分 模板。

例如,下面的 部分 模板渲染版權信息:

layouts/_partials/footer.html
<p>Copyright {{ now.Year }}。保留所有權利。</p>

通過調用 partialpartialCached 函數執行 部分 模板,可選地將上下文作為第二個參數傳遞:

layouts/baseof.html
{{ partial "footer.html" . }}

與其他模板類型不同,Hugo 在搜索匹配的 部分 模板時不考慮當前頁面種類、內容類型、邏輯路徑、語言或輸出格式。但是,它確實應用了與其他模板類型相同的 名稱 匹配邏輯。這意味著它首先嘗試找到最具體的匹配,然後在找不到特定匹配時逐漸查找更通用的版本。

例如,使用此調用:

layouts/baseof.html
{{ partial "footer.section.de.html" . }}

Hugo 使用此查找順序來查找匹配的模板:

  1. layouts/_partials/footer.section.de.html
  2. layouts/_partials/footer.section.html
  3. layouts/_partials/footer.de.html
  4. layouts/_partials/footer.html

部分 模板也可以在另一個模板內內聯定義。但是,需要注意的是模板命名空間是全局的;確保這些 部分 模板具有唯一的名稱以防止沖突。

值:{{ partial "my-inline-partial.html" . }}

{{ define "_partials/my-inline-partial.html" }}
  {{ $value := 32 }}
  {{ return $value }}
{{ end }}

Content view(內容視圖)

內容視圖 模板類似於 部分 模板,通過調用 Page 對象上的 Render 方法調用。與 部分 模板不同,內容視圖 模板:

  • 繼承當前頁面的上下文
  • 可以針對任何頁面種類、內容類型、邏輯路徑、語言或輸出格式
  • 可以位於 layouts 目錄內的任何級別

例如,Hugo 將 基礎 模板應用於下面的 home 模板,然後渲染頁面內容和網站"films"部分中每個頁面的卡片組件。

layouts/home.html
{{ define "main" }}
  {{ .Content }}
  <ul>
    {{ range where site.RegularPages "Section" "films" }}
      {{ .Render "view_card" }}
    {{ end }}
  </ul>
{{ end }}
layouts/films/view_card.html
<div class="card">
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ .Summary }}
</div>

在上面的示例中,內容視圖模板的名稱以 view_ 開頭。雖然不是嚴格要求,但此命名約定有助於區分內容視圖模板與同一目錄中的其他模板,提高組織性和清晰度。

Render hook(渲染鉤子)

渲染鉤子 模板覆蓋 Markdown 到 HTML 的轉換。

例如,下面的 渲染鉤子 模板在每個標題的右側添加錨鏈接。

layouts/_markup/render-heading.html
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{ .Text }}
  <a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>

渲染鉤子模板 中了解更多信息。

Shortcode(短代碼)

短代碼 模板用於渲染網站的組件。與 部分內容視圖 模板不同,短代碼 模板從內容頁面調用。

例如,下面的 短代碼 模板從 全局資源 渲染音頻元素。

layouts/_shortcodes/audio.html
{{ with resources.Get (.Get "src") }}
  <audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
{{ end }}

然後在標記內調用短代碼:

content/example.md
{{< audio src=/audio/test.mp3 >}}

短代碼模板 中了解更多信息。

Other(其他)

使用其他專用模板創建:


Last updated: January 1, 0001
Improve this page