模板類型 | Hugo 台灣

模板類型

January 1, 1

結構

在專案根目錄下的 layouts 目錄中創建模板。

儘管您的網站可能不需要每個模板，但下面的示例是中等複雜度網站的典型結構。

layouts/
├── _default/
│   ├── _markup/
│   │   ├── render-image.html   <-- 渲染鉤子
│   │   └── render-link.html    <-- 渲染鉤子
│   ├── baseof.html
│   ├── home.html
│   ├── section.html
│   ├── single.html
│   ├── taxonomy.html
│   └── term.html
├── articles/
│   └── card.html               <-- 內容視圖
├── partials/
│   ├── footer.html
│   └── header.html
└── shortcodes/
    ├── audio.html
    └── video.html

Hugo 的模板查找順序決定了模板的路徑，讓您能夠為任何頁面創建獨特的模板。

以下描述了每種模板類型的用途。

基本模板

基本模板通過將其他模板包裝在一個外殼中來減少重複的代碼。

例如，下面的基本模板使用 partial 函數包含 head、header 和 footer 元素的部分模板，並使用 block 函數在每個頁面的 main 元素中包含 home、single、section、taxonomy 和 term 模板。

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <header>
    {{ partial "header.html" . }}
  </header>
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>

了解更多關於基本模板。

首頁模板

首頁模板呈現您網站的首頁。對於單頁網站，這是唯一需要的模板。

例如，下面的首頁模板從基本模板繼承網站外殼，並呈現首頁內容及頁面列表。

layouts/_default/home.html

{{ define "main" }}
  {{ .Content }}
  {{ range site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

了解更多關於首頁模板。

單頁模板

單頁模板呈現單個頁面。

例如，下面的單頁模板從基本模板繼承網站外殼，並呈現每個頁面的標題和內容。

layouts/_default/single.html

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

了解更多關於單頁模板。

區段模板

區段模板通常呈現區段內的頁面列表。

例如，下面的區段模板從基本模板繼承網站外殼，並呈現當前區段中的頁面列表。

layouts/_default/section.html

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

了解更多關於區段模板。

分類模板

分類模板呈現分類中的術語列表。

例如，下面的分類模板從基本模板繼承網站外殼，並呈現當前分類中的術語列表。

layouts/_default/taxonomy.html

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

了解更多關於分類模板。

術語模板

術語模板呈現與當前術語相關聯的頁面列表。

例如，下面的術語模板從基本模板繼承網站外殼，並呈現與當前術語相關聯的頁面列表。

layouts/_default/term.html

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

了解更多關於術語模板。

部分模板

部分模板通常用於呈現網站的某個組件，雖然您也可以創建返回值的部分模板。

例如，下面的部分模板呈現版權信息。

了解更多關於部分模板。

內容視圖模板

內容視圖模板類似於部分模板，通過調用 Page 物件的 Render 方法來調用。與部分模板不同，內容視圖模板：

自動繼承當前頁面的上下文
遵循查找順序，允許您針對給定的內容類型或區段進行目標設置

例如，下面的首頁模板從基本模板繼承網站外殼，並為網站 “articles” 區段中的每個頁面渲染一個卡片組件。

layouts/_default/home.html

{{ define "main" }}
  {{ .Content }}
  <ul>
    {{ range where site.RegularPages "Section" "articles" }}
      {{ .Render "card" }}
    {{ end }}
  </ul>
{{ end }}

layouts/articles/card.html

<div class="card">
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ .Summary }}
</div>

了解更多關於內容視圖模板。

渲染鉤子

渲染鉤子模板覆蓋 Markdown 轉換為 HTML 的過程。

例如，下面的渲染鉤子模板為外部鏈接添加 rel 屬性。

layouts/_default/_markup/render-link.html

{{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
  {{- with .Title }} title="{{ . }}"{{ end -}}
  {{- if $u.IsAbs }} rel="external"{{ end -}}
>
  {{- with .Text | safeHTML }}{{ . }}{{ end -}}
</a>
{{- /* 去除末尾的換行符 */ -}}

了解更多關於渲染鉤子模板。

短代碼模板

短代碼模板用來渲染您網站的某個組件。與部分模板不同，短代碼模板是從內容頁面調用的。

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

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" >}}

了解更多關於短代碼模板。

其他

使用其他專用模板來創建：