hugo/content/en/templates/partials.md at 9aec42c5452b3eb224888c50ba1c3f3b68a447e9

mirror of https://github.com/gohugoio/hugo.git synced 2024-11-14 20:37:55 -05:00

Bjørn Erik Pedersen 77b976dd92 Squashed 'docs/' changes from a7e1e9be8..686c7b6eb

686c7b6eb ci(Netlify): specify `HUGO_VERSION` environment variable once
da99a356f fix: change heading level
e57da3f00 Update taxonomy methods
746172490 Update description of rendered breadcrumb navigation
6bc52fd40 Clarify term
dab07dcb0 Fix typo
e50fa452a Fix typo
6c1ea83c2 Update template overview page
a5dc97845 Clarify the append function
a135e52a0 Update GitHub hosting instructions
a51bf9f4f Update sections page
ed35fc6c4 Update archetypes and glossary
1a4522b3e Format examples
a70f20094 Use "hugo new content" to create content
673846ff9 Remove comment
b7febf0c5 Fix link
6f6fe2133 Miscellaneous edits
99227dd18 Remove lookup order table from output formats page
bc8870657 tools/editors: Add Prettier Plugin for Go Templates
157b169eb Update docs.yaml
1c8f514e0 Update cond function
e5f1f8113 Add assumptions to taxonomy and term template lookup order examples
475b406e2 Update postprocess
2d6cb8dfc glossary: Update content type
03b514bac Add descriptions to template lookup order example sections
06678f919 glossary: Fix broken link
4cd505612 Simplify news listing
fadb980db Update glossary of terms
491bacd78 Change order of example sections for template lookup order
04b8f39ec Create glossary of terms
12e896bc0 Remove reference to asciidoctor-rouge extension
055f7bb37 Insert missing words
8cd6ac387 Miscellaneous edits
2cbe17f41 Update configuration.md
529615373 Update data-templates.md
853154e65 Update theme
45f08627a resources.getRemote: Fix definition list
29a51dac1 Update docshelper
3bdfe88c6 Remove link to gitter from site footer
cacd0e461 Use "map" instead of "dictionary"
704dd5da6 Document the transform.Remarshal template function
e8d744951 Populate news section via GitHub releases API
3ff1118c7 Replace docs.json with docs.yaml
7726bbcac Use docs.json to generate default config throughout the site
57dca93df Use docs.json to generate default config for related content
74d5082c7 Add some .RenderShortcodes docs
cf5ab5062 netlify: Hugo 0.117.0
420f7aa69 Add all config to docshelper.json

git-subtree-dir: docs
git-subtree-split: 686c7b6eb182ed335dc94b3a0b80c564f7658380

2023-08-30 19:23:47 +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