部分模板
部分模板查找顺序
部分模板——就像单页模板和列表页模板一样——有一种特定的[查找顺序]。然而,部分模板更简单,因为Hugo只会在两个位置检查:
layouts/partials/*<PARTIALNAME>.html
themes/<THEME>/layouts/partials/*<PARTIALNAME>.html
这使得主题的最终用户可以将部分内容复制到同名文件中进行进一步自定义。
在模板中使用部分模板
您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
模板函数为不需要在每次调用时重新渲染的复杂模板提供了显著的性能提升。详情请参见详细说明。
示例
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: