TEMPLATES

部分模板

在模板中使用部分模板

所有 Hugo 專案的部分模板都位於單一的 layouts/partials 目錄中。為了更好的組織，你也可以在 partials 中創建多個子目錄：

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

所有部分模板都可以通過以下模式在模板中調用：

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

如上所示的目錄結構，你可以在 partials 中嵌套你的目錄來更好地組織源文件。你只需要相對於 partials 目錄調用嵌套部分模板的路徑：

{{ partial "header/site-header.html" . }}
{{ partial "footer/scripts.html" . }}

變數範圍

部分模板調用中的第二個參數是被傳遞的變數。上面的範例將 . 傳遞給部分模板，這告訴接收該部分的模板應用當前的 上下文。

這意味著部分模板將只能訪問這些變數。部分模板是隔離的，無法訪問外部範圍。在部分模板內，$.Var 等同於 .Var。

從部分模板返回值

除了輸出標記外，部分模板還可以用來返回任何類型的值。為了返回值，部分模板必須在模板的 末尾 包含一個獨立的 return 語句。

範例 GetFeatured 

{{/* layouts/partials/GetFeatured.html */}}
{{ return first . (where site.RegularPages "Params.featured" true) }}

{{/* layouts/index.html */}}
{{ range partial "GetFeatured.html" 5 }}
  [...]
{{ end }}

範例 GetImage 

{{/* layouts/partials/GetImage.html */}}
{{ $image := false }}
{{ with .Params.gallery }}
  {{ $image = index . 0 }}
{{ end }}
{{ with .Params.image }}
  {{ $image = . }}
{{ end }}
{{ return $image }}

{{/* layouts/_default/single.html */}}
{{ with partial "GetImage.html" . }}
  [...]
{{ end }}

行內部分模板

你也可以在模板中定義行內部分模板。但請記住，模板命名空間是全局的，因此你需要確保名稱唯一，以避免衝突。

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

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

快取部分模板

partialCached 模板函數為複雜模板提供顯著的性能提升，這些模板不需要在每次調用時重新渲染。詳情參見 partialcached。

範例

header.html

以下是用於 spf13.com 的 header.html 部分模板：

layouts/partials/header.html
<!DOCTYPE html>
<html class="no-js" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
    <meta charset="utf-8">

    {{ partial "meta.html" . }}

    <base href="{{ .Site.BaseURL }}">
    <title> {{ .Title }} : spf13.com </title>
    <link rel="canonical" href="{{ .Permalink }}">
    {{ if .RSSLink }}<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />{{ end }}

    {{ partial "head_includes.html" . }}
</head>

footer.html

以下是用於 spf13.com 的 footer.html 部分模板：

layouts/partials/footer.html
<footer>
  <div>
    <p>
    &copy; 2013-14 Steve Francia.
    <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution">Some rights reserved</a>;
    please attribute properly and link back.
    </p>
  </div>
</footer>
Content view templates FromString