部分模板

在模板中使用部分模板

Hugo 项目的所有部分模板都位于单个 layouts/partials 目录中。为了更好地组织，你也可以在 partials 中创建多个子目录。

layouts/
└── partials/
    ├── footer/
    │   ├── scripts.html
    │   └── site-footer.html
    ├── head/
    │   ├── favicons.html
    │   ├── metadata.html
    │   └── prerender.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 模板函数为不需要在每次调用时重新渲染的复杂模板提供了显著的性能提升。请参阅详细信息。

示例

`header.html`

以下 header.html 部分模板用于 spf13.com

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`

以下 footer.html 部分模板用于 spf13.com

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>