hugo/content/en/templates/partials.md at 3710a5ec7efe6baca6e452f43632c05d22bab3c4

mirror of https://github.com/gohugoio/hugo.git synced 2024-07-14 21:07:47 +00:00

Bjørn Erik Pedersen e509cac533 Squashed 'docs/' changes from 7ef2dbce4..cb18a5183

cb18a5183 Fix broken link
07a0198bf Config: Place Google Analytics tag ID under the services key
4bf0c719f Fix typo
50d8ad1af Fix muiltilingual menu definition instructions
1a32519a9 Fix typos
6f34ca8e0 Explain usage of front matter to target a template
5bd977257 Improve goldmark config docs
447632938 Remove Docker notes from installation instructions
84741d173 Update reference to hugo.work
0338d7c71 Fix menu template
f5d2f5ed4 Fix typos in content/en/functions/fmt
a3a40ff99 Add return type to functions
85ac3e779 Remove outdated feature image
d47d889e4 Fix signatures
7551ba28f Document safe.JSStr function
e77993be0 Document keyVals function
4dba20db3 Update theme
babf91544 Update echoparam
8c8203efa Adjust related functions
4cb1b30fc Fix example
ba95eca64 Improve showcase prose
5d3dcf366 Add Overmind Studios showcase
8d634ac70 Change code blocks from indented to fenced
cfab978e6 Add missing code fences
407dd5c47 Limit related pages for functions to other functions
9fa67d981 Fix .Site.LastChange doc
393aa16d0 netlify: Hugo 0.119.0
f864af97a docs: Even more about images.Process
9d772d5f0 docs: More about images.Process
bc655f869 docs: Regen docshelper
41c3536d1 Merge commit '9aec42c5452b3eb224888c50ba1c3f3b68a447e9'
918ed53f4 Add images.Process filter
573645883 Add $image.Process
a1151b0fd Add images.Opacity filter

git-subtree-dir: docs
git-subtree-split: cb18a5183fc62f301ffde50b8c39f03e4b897aec

2023-10-20 09:42:39 +02:00

5.9 KiB

Raw Blame History

title

description

Partial template lookup order

Partial templates---like single page templates and list page templates---have a specific lookup order. However, partials are simpler in that Hugo will only check in two places:

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

This allows a theme's end user to copy a partial's contents into a file of the same name for further customization.

Use partials in your templates

All partials for your Hugo project are located in a single layouts/partials directory. For better organization, you can create multiple subdirectories within partials as well:

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

All partials are called within your templates using the following pattern:

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

{{% note %}} One of the most common mistakes with new Hugo users is failing to pass a context to the partial call. In the pattern above, note how "the dot" (.) is required as the second argument to give the partial context. You can read more about "the dot" in the Hugo templating introduction. {{% /note %}}

{{% note %}} <PARTIAL> including baseof is reserved. (#5373) {{% /note %}}

As shown in the above example directory structure, you can nest your directories within partials for better source organization. You only need to call the nested partial's path relative to the partials directory:

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

Variable scoping

The second argument in a partial call is the variable being passed down. The above examples are passing the ., which tells the template receiving the partial to apply the current context.

This means the partial will only be able to access those variables. The partial is isolated and has no access to the outer scope. From within the partial, $.Var is equivalent to .Var.

Returning a value from a partial

In addition to outputting markup, partials can be used to return a value of any type. In order to return a value, a partial must include a lone return statement at the end of the partial.

Example GetFeatured

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

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

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

{{% note %}} Only one return statement is allowed per partial file. {{% /note %}}

Inline partials

You can also define partials inline in the template. But remember that template namespace is global, so you need to make sure that the names are unique to avoid conflicts.

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

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

Cached partials

The partialCached template function provides significant performance gains for complex templates that don't need to be re-rendered on every invocation. See details.

Examples

`header.html`

The following header.html partial template is used for spf13.com:

{{ 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> {{< /code >}}

{{% note %}} The header.html example partial was built before the introduction of block templates to Hugo. Read more on base templates and blocks for defining the outer chrome or shell of your master templates (i.e., your site's head, header, and footer). You can even combine blocks and partials for added flexibility. {{% /note %}}

`footer.html`

The following footer.html partial template is used for spf13.com:

5.9 KiB Raw Blame History