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.htmlHugo 的 模板查找順序 確定模板路徑,允許您為任何頁面創建獨特的模板。
在創建模板時,您必須徹底了解模板查找順序。模板選擇基於模板類型、頁面種類、內容類型、部分、語言和輸出格式。
下面描述了每種模板類型的目的。
基礎
基礎 模板作為其他模板可以構建的基礎布局。它通常定義 HTML 的常見結構組件,如 html、head 和 body 元素。它還經常包括在網站多個頁面中出現的重復功能,如頁眉、頁腳、導航和腳本引用。通過在 基礎 模板中定義這些常見方面,您避免了冗余,確保了一致性,並簡化了網站的維護。
Hugo 可以將 基礎 模板應用於以下模板類型:home、page、section、taxonomy、term、single、list 和 all。當 Hugo 解析任何這些模板類型時,只有在被解析的模板滿足這些特定條件時才會應用 基礎 模板:
如果模板不符合所有這些標准,Hugo 會按原樣執行它,而不應用 基礎 模板。
當 Hugo 應用 基礎 模板時,它會用應用於基礎模板的模板中相應的 define 動作的內容替換其 block 動作。
例如,下面的 基礎 模板調用 partial 函數來包含 head、header 和 footer 元素。block 動作充當佔位符,其內容將被應用於基礎模板的模板中匹配的 define 動作替換。
<!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>{{ define "main" }}
這將替換基礎模板中 "block" 動作的內容。
{{ end }}Home(主頁)
home 模板渲染網站的主頁。
例如,Hugo 將 基礎 模板應用於下面的 home 模板,然後渲染頁面內容和網站常規頁面的列表。
{{ define "main" }}
{{ .Content }}
{{ range .Site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。
Page(頁面)
page 模板渲染常規頁面。
例如,Hugo 將 基礎 模板應用於下面的 page 模板,然後渲染頁面標題和頁面內容。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}Section(部分)
section 模板渲染 部分 內頁面的列表。
例如,Hugo 將 基礎 模板應用於下面的 section 模板,然後渲染頁面標題、頁面內容和當前部分中頁面的列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。
Taxonomy(分類法)
taxonomy 模板渲染 分類法 中術語的列表。
例如,Hugo 將 基礎 模板應用於下面的 taxonomy 模板,然後渲染頁面標題、頁面內容和當前分類法中 術語 的列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}頁面集合快速參考指南 描述了過濾、排序和分組頁面集合的方法和函數。
在 taxonomy 模板中,Data 對象提供這些特定於分類法的方法:
Terms 方法返回 分類法對象,允許您調用其任何方法,包括 Alphabetical 和 ByCount。例如,使用 ByCount 方法渲染按與每個術語關聯的頁面數量排序的術語列表:
{{ 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 模板,然後渲染頁面標題、頁面內容和與當前術語關聯的頁面列表。
{{ 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 模板,然後渲染頁面標題和頁面內容。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}List(列表)
list 模板是 home、section、taxonomy 和 term 模板的回退。如果這些模板類型之一不存在,Hugo 將查找 list 模板。
例如,Hugo 將 基礎 模板應用於下面的 list 模板,然後渲染頁面標題、頁面內容和頁面列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}All(全部)
all 模板是 home、page、section、taxonomy、term、single 和 list 模板的回退。如果這些模板類型之一不存在,Hugo 將查找 all 模板。
例如,Hugo 將 基礎 模板應用於下面的 all 模板,然後根據其頁面種類有條件地渲染頁面。
{{ 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(部分)
部分 模板通常用於渲染網站的組件,盡管您也可以創建返回值的 部分 模板。
例如,下面的 部分 模板渲染版權信息:
<p>Copyright {{ now.Year }}。保留所有權利。</p>通過調用 partial 或 partialCached 函數執行 部分 模板,可選地將上下文作為第二個參數傳遞:
{{ partial "footer.html" . }}與其他模板類型不同,Hugo 在搜索匹配的 部分 模板時不考慮當前頁面種類、內容類型、邏輯路徑、語言或輸出格式。但是,它確實應用了與其他模板類型相同的 名稱 匹配邏輯。這意味著它首先嘗試找到最具體的匹配,然後在找不到特定匹配時逐漸查找更通用的版本。
例如,使用此調用:
{{ partial "footer.section.de.html" . }}Hugo 使用此查找順序來查找匹配的模板:
layouts/_partials/footer.section.de.htmllayouts/_partials/footer.section.htmllayouts/_partials/footer.de.htmllayouts/_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"部分中每個頁面的卡片組件。
{{ define "main" }}
{{ .Content }}
<ul>
{{ range where site.RegularPages "Section" "films" }}
{{ .Render "view_card" }}
{{ end }}
</ul>
{{ end }}<div class="card">
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
</div>在上面的示例中,內容視圖模板的名稱以 view_ 開頭。雖然不是嚴格要求,但此命名約定有助於區分內容視圖模板與同一目錄中的其他模板,提高組織性和清晰度。
Render hook(渲染鉤子)
渲染鉤子 模板覆蓋 Markdown 到 HTML 的轉換。
例如,下面的 渲染鉤子 模板在每個標題的右側添加錨鏈接。
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{ .Text }}
<a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>在 渲染鉤子模板 中了解更多信息。
Shortcode(短代碼)
短代碼 模板用於渲染網站的組件。與 部分 或 內容視圖 模板不同,短代碼 模板從內容頁面調用。
例如,下面的 短代碼 模板從 全局資源 渲染音頻元素。
{{ with resources.Get (.Get "src") }}
<audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
{{ end }}然後在標記內調用短代碼:
{{< audio src=/audio/test.mp3 >}}在 短代碼模板 中了解更多信息。
Other(其他)
使用其他專用模板創建: