前言

shot.jpg

本靜態(tài)站點(diǎn)用于演示之用，使用 Hugo 構(gòu)建，以及 Markdown 供應(yīng)內(nèi)容。

流行的靜態(tài)站點(diǎn)框架有以下幾個(gè)：

• Jekyll (基于 Ruby 容易上手) https://www.jekyll.com.cn/docs/home/
• Hexo (基于 Node.js 容易上手) https://hexo.io/docs/
• Hugo (基于 Go) https://gohugo.io/documentation/

演示站點(diǎn)有兩個(gè)訪問(wèn)入口：

• https://jimbowhy.gitee.io/
• https://jimboyeah.github.io/

此站點(diǎn)提供了一篇關(guān)于 Hugo 靜態(tài)站點(diǎn)生成框架的入門(mén)教程。

• Hugo 不完美教程 - IX: Menus 菜單組織
• Hugo 不完美教程 - VIII: Functions 內(nèi)置函數(shù)
• Hugo 不完美教程 - VII: Variables 對(duì)象變量
• Hugo 不完美教程 - VI: Multilingual 多語(yǔ)言支持
• Hugo 不完美教程 - V: Templates 模板機(jī)制
• Hugo 不完美教程 - V: Templates 其它模板
• Hugo 不完美教程 - IV: Hugo Pipes 管道處理
• Hugo 不完美教程 - III: Hugo Modules 模塊
• Hugo 不完美教程 - II: Hugo 目錄組織
• Hugo 不完美教程 - I: Hugo Web Framework

代碼倉(cāng)庫(kù)地址如下，查看 hugo-project 分支是原文件，master 分支是發(fā)布的靜態(tài)站點(diǎn)文件：

• https://github.com/jimboyeah/jimboyeah.github.io/tree/hugo-project
• https://gitee.com/jimbowhy/jimbowhy/tree/hugo-project/
  
  shot.jpg

title: "V: Templates 其它模板"
description: "堅(jiān)果的 Hugo 教程"
date: 2020-08-06T20:14:08-04:00
featured_image_: "/assets/IMG_20190117_123248_s1.jpg"
summary: Hugo 直接使用了 Golang 的模板語(yǔ)法，表達(dá)能力很強(qiáng)大，配合 Hugo 預(yù)定義變量或自定義變量實(shí)現(xiàn)非常強(qiáng)大的靜態(tài)站點(diǎn)功能。Mardown 文件提共內(nèi)容數(shù)據(jù)，而模板則是數(shù)據(jù)的消化系統(tǒng)。這部分介紹其它各種模板的使用。
tags: ["hugo", "menu"]

目錄：

[TOC]

Homepage Template 主頁(yè)模板

根據(jù)不同的內(nèi)容，對(duì)應(yīng)的不同的主頁(yè)面，下面是其中的 Home 和 JSON 的主頁(yè)定位方式，這里并沒(méi)有列出主題目錄，因?yàn)橹黝}的 layouts 目錄結(jié)構(gòu)意義是一樣的：

  {
    "Example": "Home page",
    "Kind": "home",
    "OutputFormat": "HTML",
    "Suffix": "html",
    "Template Lookup Order": [
      "layouts/index.html.html",
      "layouts/home.html.html",
      "layouts/list.html.html",
      "layouts/index.html",
      "layouts/home.html",
      "layouts/list.html",
      "layouts/_default/index.html.html",
      "layouts/_default/home.html.html",
      "layouts/_default/list.html.html",
      "layouts/_default/index.html",
      "layouts/_default/home.html",
      "layouts/_default/list.html"
    ]
  },
  {
    "Example": "JSON home",
    "Kind": "home",
    "OutputFormat": "JSON",
    "Suffix": "json",
    "Template Lookup Order": [
      "layouts/index.json.json",
      "layouts/home.json.json",
      "layouts/list.json.json",
      "layouts/index.json",
      "layouts/home.json",
      "layouts/list.json",
      "layouts/_default/index.json.json",
      "layouts/_default/home.json.json",
      "layouts/_default/list.json.json",
      "layouts/_default/index.json",
      "layouts/_default/home.json",
      "layouts/_default/list.json"
    ]
  },

一個(gè)主頁(yè)面模板參考：

{{ define "main" }}
    <main aria-role="main">
      <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
      </header>
      <div class="homepage-content">
        <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
        {{.Content}}
      </div>
      <div>
        {{ range first 10 .Site.RegularPages }}
            {{ .Render "summary"}}
        {{ end }}
      </div>
    </main>
{{ end }}

shortcode 短代碼模板

短代碼模板 shortcode 用來(lái)生成定義一段功能代碼，供內(nèi)容文件調(diào)用生成頁(yè)面。

Hugo 提供了幾個(gè)內(nèi)置的 shortcode，可是在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境卻不太好用：

• figure 使用語(yǔ)法及對(duì)應(yīng)生成

    {{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}
  
    <figure>
        <img src="/media/spf13.jpg"  />
        <figcaption>
            <h4>Steve Francia</h4>
        </figcaption>
    </figure>
  

• gist 用于生成 Git 版本倉(cāng)庫(kù)中的 URL

    {{</* gist spf13 7896402 */>}}
  
    https://gist.github.com/spf13/7896402
  
    {{</* gist spf13 7896402 "img.html" */>}}
  
    <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
  

• param 獲取頁(yè)面扉頁(yè)參數(shù)

  假設(shè)，設(shè)置了頁(yè)面扉頁(yè)參數(shù) testparam: Hugo Rocks! 那么就可以通過(guò)將其輸出到頁(yè)面：

    {{</* param testparam */>}}
  
    {{</* param "my.nested.param" */>}}
  

• ref 和 relref 根據(jù)頁(yè)面文件生成相對(duì)或絕對(duì)頁(yè)面引用 URL

    [Neat]({{< ref "blog/neat.md" >}})
    [Who]({{< relref "about.md#who" >}})
  
    <a href="/blog/neat">Neat</a>
    <a href="/about/#who:c28654c202e73453784cfd2c5ab356c0">Who</a>
  

• highlight 生成高亮代碼塊

• instagram 生成 Instagram 圖片 URL，國(guó)內(nèi)墻

    {{</* instagram BWNjjyYFxVx hidecaption */>}}
  
    https://www.instagram.com/p/BWNjjyYFxVx/
  

• tweet 國(guó)內(nèi)墻

• vimeo 國(guó)內(nèi)墻

• youtube 國(guó)內(nèi)墻

這些被墻的應(yīng)用可能會(huì)導(dǎo)致 Hugo 運(yùn)行失敗，因?yàn)榫W(wǎng)站訪問(wèn)超時(shí)導(dǎo)致，如 twitter.html 定義使用了 api.twitter.com：

{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/twitter_simple.html" . }}
{{- else -}}
{{- $url := printf "https://api.twitter.com/1/statuses/oembed.json?id=%v&dnt=%t" (index .Params 0) $pc.EnableDNT -}}
{{- $json := getJSON $url -}}
{{ $json.html | safeHTML }}
{{- end -}}
{{- end -}}

可以將有問(wèn)題 API 調(diào)用注解掉，Hugo Docs 項(xiàng)目就使用了它們：

{{/*< instagram_simple BGvuInzyFAe hidecaption >*/}}
{{/*< twitter_simple 1085870671291310081 >*/}}
{{/*< youtube ZJthWmvUzzc >*/}}
{{/*< vimeo_simple 48912912 >*/}}

另外，對(duì)于 MD 生成的標(biāo)準(zhǔn)的 HTML 標(biāo)簽，像表格，或列表，無(wú)法直接在 MD 設(shè)置樣式：

{{</* table */>}}
| Key | Value |
|---|---|
| Static Site Generator | Hugo |
| Language | Go |
{{</* /table */>}}

那么可以通過(guò)定義 shortcodes 的方式來(lái)加外層 DIV 通過(guò) CSS 級(jí)聯(lián)樣式去定義，也可以使用

{{ $table := .Inner | markdownify | safeHTML }}
{{ $tableBulma := $table | replaceRE "<table>" "<table class=\"table is-striped is-hoverable\">" }}
{{ $tableBulma | safeHTML }}

用戶定義短代碼模板的定位按以下順序：

• /layouts/shortcodes/<SHORTCODE>.html
• /themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html

先定義一個(gè) shortcode 模板 layouts\shortcodes\page-kinds.html：

所有頁(yè)面 Page 對(duì)象都有一個(gè) .Kind 屬性變量，如下：

|    Kind    |          說(shuō)明          |                              例子                              |
|------------|------------------------|----------------------------------------------------------------|
| `home`     | 正在加載的是首頁(yè)       | `/index.html`                                                  |
| `page`     | 正在加載的指定頁(yè)面     | `my-post` page (`/posts/my-post/index.html`)                   |
| `section`  | 正在加載的是分區(qū)頁(yè)     | `posts` section (`/posts/index.html`)                          |
| `taxonomy` | 正在加載的是分類(lèi)頁(yè)     | `tags` taxonomy (`/tags/index.html`)                           |
| `term`     | 正在加載的是分類(lèi)術(shù)語(yǔ)頁(yè) | term `awesome` in `tags` taxonomy (`/tags/awesome/index.html`) |

然后在 MD 內(nèi)容頁(yè)面中調(diào)用 shortcode 以生成對(duì)應(yīng)的內(nèi)容：

{{&#25 page-kinds %}}
    sometext
{{&#25 /page-kinds %}}

shortcode 短代碼模板可使用的屬性變量，以上面的調(diào)用方法作為參考，對(duì)應(yīng)值如下：

{{<table>}}

{{</table>}}

Hugo 官方文檔項(xiàng)目中提供了很好的 shortcode 模板學(xué)習(xí)示例，例如，最常用來(lái)展示高亮代碼片段 code 為例，當(dāng)你在查看官方文檔 MD 文件時(shí)，看到以下這樣的內(nèi)容：

{{</* code file="layouts/_default/section.html" download="section.html" */>}}
...
{{</* /code */>}}

這就表示，MD 文件正使用 code 生成相應(yīng)的內(nèi)容，來(lái)看看它的定義 layouts_default\shortcodes\code.html：

{{<code file="demo.html">}} {{ codeLang := "" }}
{{ " suffix }}
{{ codeLang = . }}{{ end }}
{{ if eq codeLang = "go-html-template" }}
{{ end }}
<div class="code relative" id="{{ file -}}
<div class="filename san-serif f6 dib lh-solid pl2 pv2">{{.}}</div>
{{- end -}}

    {{ if ne (.Get "copy") "false" }}
        <button class="needs-js copy bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button">
        </button>
        {{/* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
    {{end}}
    <div class="code-copy-content nt3" {{with .Get "download"}}id="{{.}}"{{end}}>
        {{ if  .Get "nocode" }}{{ $.Inner }}{{ else }}{{ with $codeLang }}{{- highlight $.Inner . "" | -}}{{ else }}
        <pre><code>{{- .Inner | string -}}</code></pre>{{ end }}{{ end }}
    </div>
</div>

{{</code>}}

這里最主要的是 highlight 這個(gè)內(nèi)置函數(shù)，對(duì)代碼片斷進(jìn)行處理得到高亮效果。也可以直接使用 highlight 像以下這樣輸出帶行高的代碼高亮代碼塊：

{{<code file="demo.html">}}
{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" />}}
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
switch strings.ToLower(style) {
case "go":
return strings.Title
case "chicago":
return transform.NewTitleConverter(transform.ChicagoStyle)
default:
return transform.NewTitleConverter(transform.APStyle)
}
}
{{</ / highlight */>}}
{{</code>}}

又以 note 短代碼模板為例，它在文檔頁(yè)面中用來(lái)生成注解信息塊：

{{ $_hugo_config := `{ "version": 1 }` }}
<aside class="admonition note">
    <div class="note-icon">
        {{partial "svg/exclamation.svg" (dict "size" "20px" ) }}
    </div>
    <!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}note{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Note{{end}}</h2> -->
    <!-- <h3>Note</h3> -->
    <div class="admonition-content">{{- .Inner -}}</div>
</aside>

首先，模板中對(duì) _hugo_config 變量進(jìn)行賦值，但沒(méi)有使用它。然后生成一個(gè) note-icon 圖標(biāo)，然后再將注解內(nèi)容 .Inner 輸出到 div.admonition-content 標(biāo)簽上。

其中，注釋掉的部分沒(méi)用起作用，但是這里調(diào)用了幾個(gè) Hugo 函數(shù)，urlize 用來(lái)將一個(gè)字符串進(jìn)行 URL 合法化編碼，參考 urlize.md 文檔。

注意，{{- .Inner -}} 模板中的負(fù)號(hào)用來(lái)移除內(nèi)容的前綴、后綴空格。

如果內(nèi)部包含 Markdown 內(nèi)容，需要使用 % 分隔符：

{{ tab name="Tab 1" %}}This is **markdown**{{ /tab %}}

Partials 模板

Partials 片斷模板用來(lái)引用片斷內(nèi)容到頁(yè)面中顯示。

模板文件定位：

• layouts/partials/*<PARTIALNAME>.html
• themes/<THEME>/layouts/partials/*<PARTIALNAME>.html

Hugo 工程的所有片斷模板都位 layouts/partials 這一個(gè)目錄，可以下設(shè)多個(gè)子目錄，參考如下：

.
└── layouts
    └── partials
        ├── footer
        │   ├── scripts.html
        │   └── site-footer.html
        ├── head
        │   ├── favicons.html
        │   ├── metadata.html
        │   ├── prerender.html
        │   └── twitter.html
        └── header
            ├── site-header.html
            └── site-nav.html

然后，在頁(yè)面中引用上面這些片斷模板，參考語(yǔ)法格式：

{{ partial "<PATH>/<PARTIAL>.html" . }}

后面的點(diǎn)號(hào)表示將當(dāng)前的上下文數(shù)據(jù)對(duì)象傳入去。

可以將 partial 模板當(dāng)作自定義函數(shù)來(lái)使用，參考 Ananke 的 func/GetFeaturedImage.html：

{{<code file="demo.html">}} {{/*
GetFeaturedImage
@return Permalink to featured image, or an empty string if not found.
*/}}

{{ $linkToCover := "" }}

{{/* Use the value from front matter if present */}}
{{ if .Params.featured_image }}
    {{ $linkToCover = .Params.featured_image }}

{{/* Find the first image with 'cover' in the name in this page bundle. */}}
{{ else }}
    {{ $img := (.Resources.ByType "image").GetMatch "*cover*" }}
    {{ with $img }}
        {{ $linkToCover = .Permalink }}
    {{ end }}
{{ end }}

{{/* return either a permalink, or an empty string. Note that partials can only have a single
return statement, so this needs to be at the end of the partial (and not in the if block) */}}
{{ return $linkToCover }}

{{</code>}}

然后，在需要使用的模板中調(diào)用：

{{ $featured_image := partial "func/GetFeaturedImage.html" . }}

Pagination 分頁(yè)模板

分頁(yè)也可以當(dāng)作菜單一樣使用，在列表頁(yè)面、Sessions、taxonomies 中進(jìn)行分頁(yè)呈現(xiàn)條目，讓靜態(tài)站點(diǎn)看下來(lái)更像是動(dòng)態(tài)的站點(diǎn)。

配合 SQL-like 一樣的操作函數(shù) first, last, after 可以對(duì)條目進(jìn)行排序。

在 config.toml 配置分頁(yè)，設(shè)置每一頁(yè)顯示的條目數(shù)量和分頁(yè)參數(shù)在 URL 中的 path 顯示配置，默認(rèn)樣式 /page/1/：

Paginate = 10
PaginatePath = page

分頁(yè)將 homepage, sections, taxonomies 頁(yè)面數(shù)據(jù)分成一小塊加載顯示，有兩種方式使用 .Paginator 生成分布標(biāo)簽：

• 在模板中直接調(diào)用 .Paginator.Pages；
• 調(diào)用分頁(yè)函數(shù)和排序再生成分頁(yè)標(biāo)簽；

示例：

{{ .Paginate.Pages }}
{{ range (.Paginate ( first 50 .Pages.ByTitle )).Pages }}

配置文件中的 Paginate 可以在模板中覆蓋，最后一個(gè)參數(shù)指定：

{{ range (.Paginator 5).Pages }}
{{ $paginator := .Paginate (where .Pages "Type" "posts") 5 }}

還可以使用 GroupBy 函數(shù)進(jìn)行分組：

{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups  }}

分布模板的最簡(jiǎn)單方法就是引入內(nèi)置的分頁(yè)模板 pagination.html，它兼容 Bootstrap 樣式：

{{ $paginator := .Paginate (where .Pages "Type" "posts") }}
{{ template "_internal/pagination.html" . }}
{{ range $paginator.Pages }}
   {{ .Title }}
{{ end }}

參考 .Paginator 對(duì)象提個(gè)的數(shù)據(jù)屬性：

{{<table>}}

{{</table>}}

頁(yè)面對(duì)像提供了大量變量，如 .Title, .Permalink 等，具體參考 page.md 文檔。

Hugo 內(nèi)置分頁(yè)模板定義如下：

{{<code file="demo.html">}} {{ .Paginator }}
{{ if gt pag.First -}}
<li class="page-item">
<a href="{{ .URL }}" class="page-link" aria-label="First"><span aria-hidden="true">??</span></a>
</li>
{{ end -}}
<li class="page-item{{ if not pag.HasPrev }}href="{{ ellipsed := false -}}
{{- pag.Pagers -}}
{{- showNumber := or (eq .TotalPages 5) (le .PageNumber 3) (eq showNumber -}}
{{- shouldEllipse = false -}}
{{- else -}}
{{- ellipsed -}}
{{- showNumber }}
<li class="page-item{{ if eq . shouldEllipse }}
<li class="page-item disabled">
<span aria-hidden="true">?…?</span>
</li>
{{- end -}}
{{- end }}
<li class="page-item{{ if not pag.HasNext }}href="{{ pag.Last }}
<li class="page-item">
<a href="{{ .URL }}" class="page-link" aria-label="Last"><span aria-hidden="true">??</span></a>
</li>
{{- end }}
</ul>
{{ end }}
{{</code>}}

Menu Templates 菜單模板

定義一個(gè) layouts/partials/sidebar.html

{{<code file="demo.html">}}
<aside>
<ul>
{{ currentPage.HasMenuCurrent "main" . }}active{{ end }}">
<a href="#">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
<ul class="sub-menu">
{{ range .Children }}
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
{{ else }}
<li>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
{{ end }}
<li>
<a href="#" target="_blank">Hardcoded Link 1</a>
</li>
<li>
<a href="#" target="_blank">Hardcoded Link 2</a>
</li>
</ul>
</aside>
{{</code>}}

內(nèi)置函數(shù) absLangURL 和 relLangURL 可以正確處理多語(yǔ)言配置的站點(diǎn)，此外，可以使用 absURL 和 relURL，它們會(huì)將語(yǔ)言前綴在 URL 上。

在配置文件中設(shè)置 Section Menu 以將分區(qū)頁(yè)面做為菜單數(shù)據(jù)：

sectionPagesMenu = "main"

然后在內(nèi)頁(yè)中呈現(xiàn)：

<nav class="sidebar-nav">
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    {{ end }}
</nav>

配置站點(diǎn)菜單 config.toml：

[menu]

  [[menu.main]]
    identifier = "blog"
    name = "This is the blog section"
    title = "blog section"
    url = "/blog/"
    weight = -110

或者，在頁(yè)面中定義菜單數(shù)據(jù)：

---
title: Menu Templates
linktitle: Menu Templates
menu:
  docs:
    title: "how to use menus in templates"
    parent: "templates"
    weight: 130
---
...

在菜單中使用 .Page 獲取頁(yè)面對(duì)象：

<nav class="sidebar-nav">
  {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" title="{{ .Title }}">
      {{- .Name -}}
      {{- with .Page -}}
        <span class="date">
        {{- dateFormat " (2006-01-02)" .Date -}}
        </span>
      {{- end -}}
    </a>
  {{ end }}
</nav>

Single Page Template

內(nèi)容頁(yè)面類(lèi)型指定為 page，那么就會(huì)有相應(yīng)的 page variables 和 site variables，在它們的模板文件中可以使用這些變量：

具體變量列表需要查閱 pages.md 和 site.md。

模板定位，參考 docs.json 給出的數(shù)據(jù)部分?jǐn)?shù)據(jù)，如果頁(yè)面在 posts 目錄下就適用以下定位：

{
"Example": "Single page in \"posts\" section",
"Kind": "page",
"OutputFormat": "HTML",
"Suffix": "html",
"Template Lookup Order": [
  "layouts/posts/single.html.html",
  "layouts/posts/single.html",
  "layouts/_default/single.html.html",
  "layouts/_default/single.html"
]
},

那么，在建立一個(gè)單頁(yè)面模板 layouts/posts/single.html 就會(huì)有效：

{{<code file="demo.html">}} {{ define "main" }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta">
<div>
<section>
<h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
<h5 id="wordcount"> {{ .WordCount }} Words </h5>
</section>
{{ with .Params.topics }}
<ul id="topics">
{{ range . }}
<li><a href="{{ "topics" | absURL}}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
{{ end }}
{{ with .Params.tags }}
<ul id="tags">
{{ range . }}
<li> <a href="{{ "tags" | absURL }}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
{{ end }}
</div>
<div>
{{ with .PrevInSection }}
<a class="previous" href="{{.Permalink}}"> {{.Title}}</a>
{{ end }}
{{ with .NextInSection }}
<a class="next" href="{{.Permalink}}"> {{.Title}}</a>
{{ end }}
</div>
</aside>
{{ end }}
{{</code>}}

List Templates 列表模板

參考 Hugo 文檔的函數(shù)列表部分實(shí)現(xiàn)，在函數(shù)索引列表頁(yè)面中，將各個(gè)函數(shù) MD 內(nèi)容中的 linktitle 和 description 呈現(xiàn)在頁(yè)面上，例如 content\en\functions\md5.md 內(nèi)容中扉頁(yè)數(shù)據(jù)定義如下：

---
title: md5
linktitle: md5
description: hashes the given input and returns its MD5 checksum.
godocref:
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-02-01
categories: [functions]
menu:
  docs:
    parent: "functions"
keywords: []
signature: ["md5 INPUT"]
workson: []
hugoversion:
relatedfuncs: [sha]
deprecated: false
aliases: []
---

Hugo 文檔使用的主題是模塊方式導(dǎo)入的，見(jiàn) config.toml 配置文件：

[module]
  [module.hugoVersion]
    min = "0.56.0"
  [[module.imports]]
    path = "github.com/gohugoio/gohugoioTheme"

在 _vendor 目錄下的 gohugoioTheme 定義了一個(gè) layouts\partials\docs\functions-signature.html 片斷，它會(huì)在每個(gè)函數(shù)頁(yè)面模板中呈現(xiàn)函數(shù)的語(yǔ)法內(nèi)容：

{{ if isset .Params "signature" -}}
  {{- with .Params.signature }}
    <h2 class="minor mb1 pt4 primary-color-dark">Syntax</h2>
    {{- range . }}
      <pre class="f5 mb4 ph3 pv2 bg-light-gray" style="border-left:4px solid #0594CB;">
        {{- . -}}
      </pre>
    {{- end }}
  {{- end -}}
{{ end }}
{{/* The inline style overrides `pre` styling defaults */}}

然后在頁(yè)面 section 模板中 layouts/_default/page.html 使用它來(lái)呈現(xiàn)函數(shù)語(yǔ)法信息：

<div class="prose" id="prose">
  {{- partial "docs/functions-signature.html" . -}}
  {{ .Content }}
</div>