mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-25 07:48:52 +00:00
content: Update to align with v0.146.0 template system (phase 1)
This commit is contained in:
@@ -32,13 +32,13 @@ content/
|
||||
|
||||
And these templates:
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ range .Pages.ByWeight }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with .Prev }}
|
||||
<a href="{{ .RelPermalink }}">Previous</a>
|
||||
{{ end }}
|
||||
|
||||
@@ -32,13 +32,13 @@ content/
|
||||
|
||||
And these templates:
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ range .Pages.ByWeight }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with .PrevInSection }}
|
||||
<a href="{{ .RelPermalink }}">Previous</a>
|
||||
{{ end }}
|
||||
|
||||
@@ -32,13 +32,13 @@ content/
|
||||
|
||||
And these templates:
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ range .Pages.ByWeight }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $pages := .CurrentSection.Pages.ByWeight }}
|
||||
|
||||
{{ with $pages.Prev . }}
|
||||
@@ -57,7 +57,7 @@ When you visit page-2:
|
||||
|
||||
To reverse the meaning of _next_ and _previous_ you can chain the [`Reverse`] method to the page collection definition:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $pages := .CurrentSection.Pages.ByWeight.Reverse }}
|
||||
|
||||
{{ with $pages.Prev . }}
|
||||
|
||||
@@ -34,7 +34,7 @@ To capture the "genres" `Taxonomy` object from within any template, use the [`Ta
|
||||
|
||||
To capture the "genres" `Taxonomy` object when rendering its page with a taxonomy template, use the [`Terms`] method on the page's [`Data`] object:
|
||||
|
||||
```go-html-template {file="layouts/_default/taxonomy.html"}
|
||||
```go-html-template {file="layouts/taxonomy.html"}
|
||||
{{ $taxonomyObject := .Data.Terms }}
|
||||
```
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ _comment: Do not remove front matter.
|
||||
|
||||
The primary use case for `PageInner` is to resolve links and [page resources](g) relative to an included `Page`. For example, create an "include" shortcode to compose a page from multiple content files, while preserving a global context for footnotes and the table of contents:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/include.html" copy=true}
|
||||
```go-html-template {file="layouts/_shortcodes/include.html" copy=true}
|
||||
{{ with .Get 0 }}
|
||||
{{ with $.Page.GetPage . }}
|
||||
{{- .RenderShortcodes }}
|
||||
|
||||
@@ -247,7 +247,7 @@ rougify style monokai.sublime > assets/css/syntax.css
|
||||
|
||||
In your base template add a link to the CSS file:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
<head>
|
||||
...
|
||||
{{ with resources.Get "css/syntax.css" }}
|
||||
|
||||
@@ -135,7 +135,7 @@ See [configure outputs] for more information.
|
||||
Create a template to render the output format. Since Atom feeds are lists, you need to create a list template. Consult the [template lookup order] to find the correct template path:
|
||||
|
||||
```text
|
||||
layouts/_default/list.atom.atom
|
||||
layouts/list.atom.atom
|
||||
```
|
||||
|
||||
We leave writing the template code as an exercise for you. Aim for a result similar to the [embedded RSS template].
|
||||
@@ -154,7 +154,7 @@ To access output formats, each `Page` object provides two methods: [`OutputForma
|
||||
|
||||
By default, a `Page` object's [`Permalink`] and [`RelPermalink`] methods return the URL of the [primary output format](g), typically `html`. This behavior remains consistent regardless of the template used.
|
||||
|
||||
For example, in `single.json.json`, you'll see:
|
||||
For example, in `page.json.json`, you'll see:
|
||||
|
||||
```go-html-template
|
||||
{{ .RelPermalink }} → /that-page/
|
||||
@@ -165,7 +165,7 @@ For example, in `single.json.json`, you'll see:
|
||||
|
||||
To make these methods return the URL of the _current_ template's output format, you must set the [`permalinkable`] setting to `true` for that format.
|
||||
|
||||
With `permalinkable` set to true for `json` in the same `single.json.json` template:
|
||||
With `permalinkable` set to true for `json` in the same `page.json.json` template:
|
||||
|
||||
```go-html-template
|
||||
{{ .RelPermalink }} → /that-page/index.json
|
||||
@@ -188,9 +188,9 @@ For example, for section pages:
|
||||
|
||||
Output format|Template path
|
||||
:--|:--
|
||||
`html`|`layouts/_default/section.html.html`
|
||||
`json`|`layouts/_default/section.json.json`
|
||||
`rss`|`layouts/_default/section.rss.xml`
|
||||
`html`|`layouts/section.html.html`
|
||||
`json`|`layouts/section.json.json`
|
||||
`rss`|`layouts/section.rss.xml`
|
||||
|
||||
[`AlternativeOutputFormats`]: /methods/page/alternativeoutputformats/
|
||||
[`OutputFormats`]: /methods/page/outputformats/
|
||||
|
||||
@@ -97,7 +97,7 @@ We've configured the `authors` index with a weight of `2` and the `genres` index
|
||||
|
||||
Then render a list of 5 related reviews with a partial template like this:
|
||||
|
||||
```go-html-template {file="layouts/partials/related.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/related.html" copy=true}
|
||||
{{ with site.RegularPages.Related . | first 5 }}
|
||||
<p>Related content:</p>
|
||||
<ul>
|
||||
|
||||
@@ -69,7 +69,7 @@ title = 'Headless page'
|
||||
|
||||
To include the content and images on the home page:
|
||||
|
||||
```go-html-template {file="layouts/_default/home.html"}
|
||||
```go-html-template {file="layouts/home.html"}
|
||||
{{ with .Site.GetPage "/headless" }}
|
||||
{{ .Content }}
|
||||
{{ range .Resources.ByType "image" }}
|
||||
@@ -127,7 +127,7 @@ In the front matter above, note that we have set `list` to `local` to include th
|
||||
|
||||
To include the content and images on the home page:
|
||||
|
||||
```go-html-template {file="layouts/_default/home.html"}
|
||||
```go-html-template {file="layouts/home.html"}
|
||||
{{ with .Site.GetPage "/headless" }}
|
||||
{{ range .Pages }}
|
||||
{{ .Content }}
|
||||
@@ -186,7 +186,7 @@ render = 'always'
|
||||
|
||||
To render the glossary:
|
||||
|
||||
```go-html-template {file="layouts/glossary/list.html"}
|
||||
```go-html-template {file="layouts/glossary/section.html"}
|
||||
<dl>
|
||||
{{ range .Pages }}
|
||||
<dt>{{ .Title }}</dt>
|
||||
|
||||
@@ -34,7 +34,7 @@ For many websites, this is enough configuration. However, you also have the opti
|
||||
Disqus has its own [internal template](/templates/embedded/#disqus) available, to render it add the following code where you want comments to appear:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
{{ partial "disqus.html" . }}
|
||||
```
|
||||
|
||||
## Alternatives
|
||||
|
||||
@@ -71,7 +71,7 @@ Adds a page resource to the site.
|
||||
|
||||
Then retrieve the new page resource with something like:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with .Resources.Get "cover.jpg" }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
@@ -237,9 +237,9 @@ Create the content adapter.
|
||||
|
||||
### Step 4
|
||||
|
||||
Create a single template to render each book review.
|
||||
Create a page template to render each book review.
|
||||
|
||||
```go-html-template {file="layouts/books/single.html" copy=true}
|
||||
```go-html-template {file="layouts/books/page.html" copy=true}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ Use data sources to augment existing content. For example, create a shortcode to
|
||||
{{</* csv-to-table "pets.csv" */>}}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/csv-to-table.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/csv-to-table.html"}
|
||||
{{ with $file := .Get 0 }}
|
||||
{{ with resources.Get $file }}
|
||||
{{ with . | transform.Unmarshal }}
|
||||
|
||||
@@ -39,7 +39,7 @@ Will be rendered as:
|
||||
|
||||
Hugo does not provide a built-in template for Mermaid diagrams. Create your own using a [code block render hook]:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-codeblock-mermaid.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-codeblock-mermaid.html" copy=true}
|
||||
<pre class="mermaid">
|
||||
{{ .Inner | htmlEscape | safeHTML }}
|
||||
</pre>
|
||||
@@ -48,7 +48,7 @@ Hugo does not provide a built-in template for Mermaid diagrams. Create your own
|
||||
|
||||
Then include this snippet at the _bottom_ of your base template, before the closing `body` tag:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html" copy=true}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
{{ if .Store.Get "hasMermaid" }}
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
|
||||
|
||||
@@ -237,7 +237,7 @@ You can add taxonomy terms to the front matter of any these [page kinds](g):
|
||||
|
||||
Access taxonomy terms from a template using the [`Params`] or [`GetTerms`] method on a `Page` object. For example:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with .GetTerms "tags" }}
|
||||
<p>Tags</p>
|
||||
<ul>
|
||||
|
||||
@@ -87,7 +87,7 @@ inline = [['@', '@']]
|
||||
|
||||
Create a partial template to load MathJax or KaTeX. The example below loads MathJax, or you can use KaTeX as described in the [engines](#engines) section.
|
||||
|
||||
```go-html-template {file="layouts/partials/math.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/math.html" copy=true}
|
||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
|
||||
<script>
|
||||
MathJax = {
|
||||
@@ -108,7 +108,7 @@ The delimiters above must match the delimiters in your site configuration.
|
||||
|
||||
Conditionally call the partial template from the base template.
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
<head>
|
||||
...
|
||||
{{ if .Param "math" }}
|
||||
@@ -181,7 +181,7 @@ MathJax and KaTeX are open-source JavaScript display engines. Both engines are f
|
||||
|
||||
To use KaTeX instead of MathJax, replace the partial template from [Step 2] with this:
|
||||
|
||||
```go-html-template {file="layouts/partials/math.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/math.html" copy=true}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
|
||||
|
||||
@@ -114,7 +114,7 @@ If, across the linked bundles, two or more files share the same basename, only o
|
||||
|
||||
To create a list of links to translated content, use a template similar to the following:
|
||||
|
||||
```go-html-template {file="layouts/partials/i18nlist.html"}
|
||||
```go-html-template {file="layouts/_partials/i18nlist.html"}
|
||||
{{ if .IsTranslated }}
|
||||
<h4>{{ i18n "translations" }}</h4>
|
||||
<ul>
|
||||
@@ -127,7 +127,7 @@ To create a list of links to translated content, use a template similar to the f
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
The above can be put in a `partial` (i.e., inside `layouts/partials/`) and included in any template. It will not print anything if there are no translations for a given page.
|
||||
The above can be put in a partial template then included in any template. It will not print anything if there are no translations for a given page.
|
||||
|
||||
The above also uses the [`i18n` function][i18func] described in the next section.
|
||||
|
||||
@@ -135,7 +135,7 @@ The above also uses the [`i18n` function][i18func] described in the next section
|
||||
|
||||
`.AllTranslations` on a `Page` can be used to list all translations, including the page itself. On the home page it can be used to build a language navigator:
|
||||
|
||||
```go-html-template {file="layouts/partials/allLanguages.html"}
|
||||
```go-html-template {file="layouts/_partials/allLanguages.html"}
|
||||
<ul>
|
||||
{{ range $.Site.Home.AllTranslations }}
|
||||
<li><a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
|
||||
|
||||
@@ -99,7 +99,7 @@ The [sections] can be nested as deeply as you want. The important thing to under
|
||||
|
||||
### Single pages in sections
|
||||
|
||||
Single content files in each of your sections will be rendered by a [single template]. Here is an example of a single `post` within `posts`:
|
||||
Single content files in each of your sections will be rendered by a [page template]. Here is an example of a single `post` within `posts`:
|
||||
|
||||
```txt
|
||||
path ("posts/my-first-hugo-post.md")
|
||||
@@ -148,4 +148,4 @@ The `url` is the entire URL path, defined by the file path and optionally overri
|
||||
[config]: /configuration/
|
||||
[pretty]: /content-management/urls/#appearance
|
||||
[sections]: /content-management/sections/
|
||||
[single template]: /templates/types/#single
|
||||
[page template]: /templates/types/#page
|
||||
|
||||
@@ -12,7 +12,7 @@ Hugo uses a set of factors to identify a page's related content based on front m
|
||||
|
||||
To list up to 5 related pages (which share the same _date_ or _keyword_ parameters) is as simple as including something similar to this partial in your template:
|
||||
|
||||
```go-html-template {file="layouts/partials/related.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/related.html" copy=true}
|
||||
{{ with site.RegularPages.Related . | first 5 }}
|
||||
<p>Related content:</p>
|
||||
<ul>
|
||||
|
||||
@@ -63,7 +63,7 @@ With the file structure from the [example above](#overview):
|
||||
|
||||
1. The list page for the articles section includes all articles, regardless of directory structure; none of the subdirectories are sections.
|
||||
1. The articles/2022 and articles/2023 directories do not have list pages; they are not sections.
|
||||
1. The list page for the products section, by default, includes product-1 and product-2, but not their descendant pages. To include descendant pages, use the `RegularPagesRecursive` method instead of the `Pages` method in the list template.
|
||||
1. The list page for the products section, by default, includes product-1 and product-2, but not their descendant pages. To include descendant pages, use the `RegularPagesRecursive` method instead of the `Pages` method in the section template.
|
||||
1. All directories in the products section have list pages; each directory is a section.
|
||||
|
||||
## Template selection
|
||||
@@ -74,15 +74,15 @@ With the file structure from the [example above](#overview):
|
||||
|
||||
Content directory|Section template
|
||||
:--|:--
|
||||
`content/products`|`layouts/products/list.html`
|
||||
`content/products/product-1`|`layouts/products/list.html`
|
||||
`content/products/product-1/benefits`|`layouts/products/list.html`
|
||||
`content/products`|`layouts/products/section.html`
|
||||
`content/products/product-1`|`layouts/products/section.html`
|
||||
`content/products/product-1/benefits`|`layouts/products/section.html`
|
||||
|
||||
Content directory|Single template
|
||||
Content directory|Page template
|
||||
:--|:--
|
||||
`content/products`|`layouts/products/single.html`
|
||||
`content/products/product-1`|`layouts/products/single.html`
|
||||
`content/products/product-1/benefits`|`layouts/products/single.html`
|
||||
`content/products`|`layouts/products/page.html`
|
||||
`content/products/product-1`|`layouts/products/page.html`
|
||||
`content/products/product-1/benefits`|`layouts/products/page.html`
|
||||
|
||||
If you need to use a different template for a subsection, specify `type` and/or `layout` in front matter.
|
||||
|
||||
@@ -98,7 +98,7 @@ The content file (benefit-1.md) has four ancestors: benefits, product-1, product
|
||||
|
||||
For example, use the `.Ancestors` method to render breadcrumb navigation.
|
||||
|
||||
```go-html-template {file="layouts/partials/breadcrumb.html"}
|
||||
```go-html-template {file="layouts/_partials/breadcrumb.html"}
|
||||
<nav aria-label="breadcrumb" class="breadcrumb">
|
||||
<ol>
|
||||
{{ range .Ancestors.Reverse }}
|
||||
|
||||
@@ -22,7 +22,7 @@ Hugo's embedded shortcodes are pre-defined templates within the application. Ref
|
||||
|
||||
Create custom shortcodes to simplify and standardize content creation. For example, the following shortcode template generates an audio player using a [global resource](g):
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/audio.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/audio.html"}
|
||||
{{ with resources.Get (.Get "src") }}
|
||||
<audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
|
||||
{{ end }}
|
||||
@@ -181,7 +181,7 @@ With standard notation, Hugo processes the shortcode separately, merging the out
|
||||
|
||||
By way of example, with this shortcode template:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/foo.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/foo.html"}
|
||||
{{ .Inner }}
|
||||
```
|
||||
|
||||
|
||||
@@ -108,18 +108,73 @@ categories_weight = 44
|
||||
|
||||
By using taxonomic weight, the same piece of content can appear in different positions in different taxonomies.
|
||||
|
||||
## Add custom metadata to a taxonomy or term
|
||||
## Metadata
|
||||
|
||||
If you need to add custom metadata to your taxonomy terms, you will need to create a page for that term at `/content/<TAXONOMY>/<TERM>/_index.md` and add your metadata in its front matter. Continuing with our 'Actors' example, let's say you want to add a Wikipedia page link to each actor. Your terms pages would be something like this:
|
||||
Display metadata about each term by creating a corresponding branch bundle in the `content` directory.
|
||||
|
||||
{{< code-toggle file=content/actors/bruce-willis/_index.md fm=true >}}
|
||||
title: "Bruce Willis"
|
||||
wikipedia: "https://en.wikipedia.org/wiki/Bruce_Willis"
|
||||
For example, create an "authors" taxonomy:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[taxonomies]
|
||||
author = 'authors'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
[content section]: /content-management/sections/
|
||||
[content type]: /content-management/types/
|
||||
[documentation on archetypes]: /content-management/archetypes/
|
||||
[front matter]: /content-management/front-matter/
|
||||
[taxonomy templates]: /templates/types/#taxonomy
|
||||
[site configuration]: /configuration/
|
||||
Then create content with one [branch bundle](g) for each term:
|
||||
|
||||
```text
|
||||
content/
|
||||
└── authors/
|
||||
├── jsmith/
|
||||
│ ├── _index.md
|
||||
│ └── portrait.jpg
|
||||
└── rjones/
|
||||
├── _index.md
|
||||
└── portrait.jpg
|
||||
```
|
||||
|
||||
Then add front matter to each term page:
|
||||
|
||||
{{< code-toggle file=content/authors/jsmith/_index.md fm=true >}}
|
||||
title = "John Smith"
|
||||
affiliation = "University of Chicago"
|
||||
{{< /code-toggle >}}
|
||||
|
||||
Then create a taxonomy template specific to the "authors" taxonomy:
|
||||
|
||||
```go-html-template {file="layouts/authors/taxonomy.html"}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ range .Data.Terms.Alphabetical }}
|
||||
<h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a></h2>
|
||||
<p>Affiliation: {{ .Page.Params.Affiliation }}</p>
|
||||
{{ with .Page.Resources.Get "portrait.jpg" }}
|
||||
{{ with .Fill "100x100" }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="portrait">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
In the example above we list each author including their affiliation and portrait.
|
||||
|
||||
Or create a term template specific to the "authors" taxonomy:
|
||||
|
||||
```go-html-template {file="layouts/authors/term.html"}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p>Affiliation: {{ .Params.affiliation }}</p>
|
||||
{{ with .Resources.Get "portrait.jpg" }}
|
||||
{{ with .Fill "100x100" }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="portrait">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ .Content }}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
In the example above we display the author including their affiliation and portrait, then a list of associated content.
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Content types
|
||||
description: Hugo is built around content organized in sections.
|
||||
categories: []
|
||||
keywords: []
|
||||
aliases: [/content/types]
|
||||
---
|
||||
|
||||
A **content type** is a way to organize your content. Hugo resolves the content type from either the `type` in front matter or, if not set, the first directory in the file path. E.g. `content/blog/my-first-event.md` will be of type `blog` if no `type` is set.
|
||||
|
||||
A content type is used to
|
||||
|
||||
- Determine how the content is rendered. See [Template Lookup Order](/templates/lookup-order/) and [Content Views](/templates/content-view) for more.
|
||||
- Determine which [archetype](/content-management/archetypes/) template to use for new content.
|
||||
@@ -226,7 +226,7 @@ erroneous lexing/highlighting of shortcode calls.
|
||||
To include a filename header and copy-to-clipboard button:
|
||||
|
||||
````text
|
||||
```go-html-template {file="layouts/partials/foo.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/foo.html" copy=true}
|
||||
{{ if eq $foo "bar" }}
|
||||
{{ print "foo is bar" }}
|
||||
{{ end }}
|
||||
@@ -236,7 +236,7 @@ To include a filename header and copy-to-clipboard button:
|
||||
To wrap the code block within an initially-opened `details` element using a non-default summary:
|
||||
|
||||
````text
|
||||
```go-html-template {details=true open=true summary="layouts/partials/foo.html" copy=true}
|
||||
```go-html-template {details=true open=true summary="layouts/_partials/foo.html" copy=true}
|
||||
{{ if eq $foo "bar" }}
|
||||
{{ print "foo is bar" }}
|
||||
{{ end }}
|
||||
@@ -427,7 +427,7 @@ Use the [new-in shortcode](#new-in) to indicate a new feature:
|
||||
{{</* new-in 0.144.0 */>}}
|
||||
```
|
||||
|
||||
The "new in" label will be hidden if the specified version is older than a predefined threshold, based on differences in major and minor versions. See [details](https://github.com/gohugoio/hugoDocs/blob/master/_vendor/github.com/gohugoio/gohugoioTheme/layouts/shortcodes/new-in.html).
|
||||
The "new in" label will be hidden if the specified version is older than a predefined threshold, based on differences in major and minor versions. See [details](https://github.com/gohugoio/hugoDocs/blob/master/_vendor/github.com/gohugoio/gohugoioTheme/layouts/_shortcodes/new-in.html).
|
||||
|
||||
## Deprecated features
|
||||
|
||||
|
||||
@@ -76,7 +76,7 @@ Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` i
|
||||
|
||||
Create a partial template to process the CSS with the Tailwind CSS CLI:
|
||||
|
||||
```go-html-template {file="layouts/partials/css.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/css.html" copy=true}
|
||||
{{ with resources.Get "css/main.css" }}
|
||||
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
|
||||
{{ with . | css.TailwindCSS $opts }}
|
||||
|
||||
@@ -66,7 +66,7 @@ To customize rendering, override Hugo's [embedded code block render hook] for Go
|
||||
|
||||
By way of example, let's create a code block render hook to render GoAT diagrams as `figure` elements with an optional caption.
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-codeblock-goat.html"}
|
||||
```go-html-template {file="layouts/_markup/render-codeblock-goat.html"}
|
||||
{{ $caption := or .Attributes.caption "" }}
|
||||
{{ $class := or .Attributes.class "diagram" }}
|
||||
{{ $id := or .Attributes.id (printf "diagram-%d" (add 1 .Ordinal)) }}
|
||||
|
||||
@@ -30,7 +30,7 @@ When a `Page` object is not in context, you can use the global `page` function:
|
||||
|
||||
## Explanation
|
||||
|
||||
Hugo almost always passes a `Page` as the data context into the top-level template (e.g., `single.html`). The one exception is the multihost sitemap template. This means that you can access the current page with the `.` in the template.
|
||||
Hugo almost always passes a `Page` as the data context into the top-level template (e.g., `baseof.html`). The one exception is the multihost sitemap template. This means that you can access the current page with the `.` in the template.
|
||||
|
||||
But when you are deeply nested inside of a [content view](g), [partial](g), or [render hook](g), it is not always practical or possible to access the `Page` object.
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ and then executing it in place:
|
||||
```
|
||||
The typical use is to define a set of root templates that are then customized by redefining the block templates within.
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
<body>
|
||||
<main>
|
||||
{{ block "main" . }}
|
||||
@@ -33,14 +33,14 @@ The typical use is to define a set of root templates that are then customized by
|
||||
</body>
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
|
||||
@@ -28,7 +28,7 @@ Use with the [`partial`] function:
|
||||
```go-html-template
|
||||
{{ partial "inline/foo.html" (dict "answer" 42) }}
|
||||
|
||||
{{ define "partials/inline/foo.html" }}
|
||||
{{ define "_partials/inline/foo.html" }}
|
||||
{{ printf "The answer is %v." .answer }}
|
||||
{{ end }}
|
||||
```
|
||||
@@ -43,8 +43,21 @@ Use with the [`template`] function:
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
> [!warning]
|
||||
> Only [template comments] are allowed outside of the `define` and `end` statements. Avoid placing any other text, including HTML comments, outside of these boundaries. Doing so will cause rendering issues, potentially resulting in a blank page. See the example below.
|
||||
|
||||
```go-html-template {file="layouts/do-not-do-this.html"}
|
||||
<div>This div element broke your template.</div>
|
||||
{{ define "main" }}
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
<!-- An HTML comment will break your template too. -->
|
||||
```
|
||||
|
||||
{{% include "/_common/functions/go-template/text-template.md" %}}
|
||||
|
||||
[`block`]: /functions/go-template/block/
|
||||
[`template`]: /functions/go-template/block/
|
||||
[`partial`]: /functions/partials/include/
|
||||
|
||||
{{% include "/_common/functions/go-template/text-template.md" %}}
|
||||
[template comments]: /templates/introduction/#comments
|
||||
|
||||
@@ -23,7 +23,7 @@ A `return` statement without a value returns an empty string of type `template.H
|
||||
|
||||
By way of example, let's create a partial template that _renders_ HTML, describing whether the given number is odd or even:
|
||||
|
||||
```go-html-template {file="layouts/partials/odd-or-even.html"}
|
||||
```go-html-template {file="layouts/_partials/odd-or-even.html"}
|
||||
{{ if math.ModBool . 2 }}
|
||||
<p>{{ . }} is even</p>
|
||||
{{ else }}
|
||||
@@ -39,7 +39,7 @@ When called, the partial renders HTML:
|
||||
|
||||
Instead of rendering HTML, let's create a partial that _returns_ a boolean value, reporting whether the given number is even:
|
||||
|
||||
```go-html-template {file="layouts/partials/is-even.html"}
|
||||
```go-html-template {file="layouts/_partials/is-even.html"}
|
||||
{{ return math.ModBool . 2 }}
|
||||
```
|
||||
|
||||
@@ -60,8 +60,6 @@ Hugo renders:
|
||||
<p>42 is even</p>
|
||||
```
|
||||
|
||||
See additional examples in the [partial templates] section.
|
||||
|
||||
## Usage
|
||||
|
||||
> [!note]
|
||||
@@ -71,7 +69,7 @@ A partial that returns a value must contain only one `return` statement, placed
|
||||
|
||||
For example:
|
||||
|
||||
```go-html-template {file="layouts/partials/is-even.html"}
|
||||
```go-html-template {file="layouts/_partials/is-even.html"}
|
||||
{{ $result := false }}
|
||||
{{ if math.ModBool . 2 }}
|
||||
{{ $result = "even" }}
|
||||
@@ -84,7 +82,7 @@ For example:
|
||||
> [!note]
|
||||
> The construct below is incorrect; it contains more than one `return` statement.
|
||||
|
||||
```go-html-template {file="layouts/partials/do-not-do-this.html"}
|
||||
```go-html-template {file="layouts/_partials/do-not-do-this.html"}
|
||||
{{ if math.ModBool . 2 }}
|
||||
{{ return "even" }}
|
||||
{{ else }}
|
||||
@@ -92,5 +90,4 @@ For example:
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
[partial templates]: /templates/partial/#returning-a-value-from-a-partial
|
||||
[text/template package]: https://pkg.go.dev/text/template
|
||||
|
||||
@@ -10,27 +10,7 @@ params:
|
||||
signatures: ['template NAME [CONTEXT]']
|
||||
---
|
||||
|
||||
Use the `template` function to execute any of these [embedded templates](g):
|
||||
|
||||
- [`disqus.html`]
|
||||
- [`google_analytics.html`]
|
||||
- [`opengraph.html`]
|
||||
- [`pagination.html`]
|
||||
- [`schema.html`]
|
||||
- [`twitter_cards.html`]
|
||||
|
||||
|
||||
|
||||
For example:
|
||||
|
||||
```go-html-template
|
||||
{{ range (.Paginate .Pages).Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
```
|
||||
|
||||
You can also use the `template` function to execute a defined template:
|
||||
Use the `template` function to execute a defined template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "foo" (dict "answer" 42) }}
|
||||
@@ -40,12 +20,12 @@ You can also use the `template` function to execute a defined template:
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
The example above can be rewritten using an [inline partial] template:
|
||||
The example above can be rewritten using an inline partial template:
|
||||
|
||||
```go-html-template
|
||||
{{ partial "inline/foo.html" (dict "answer" 42) }}
|
||||
|
||||
{{ define "partials/inline/foo.html" }}
|
||||
{{ define "_partials/inline/foo.html" }}
|
||||
{{ printf "The answer is %v." .answer }}
|
||||
{{ end }}
|
||||
```
|
||||
@@ -58,13 +38,5 @@ The key distinctions between the preceding two examples are:
|
||||
|
||||
{{% include "/_common/functions/go-template/text-template.md" %}}
|
||||
|
||||
[`disqus.html`]: /templates/embedded/#disqus
|
||||
[`google_analytics.html`]: /templates/embedded/#google-analytics
|
||||
[`opengraph.html`]: /templates/embedded/#open-graph
|
||||
[`pagination.html`]: /templates/embedded/#pagination
|
||||
[`partialCached`]: /functions/partials/includecached/
|
||||
[`partial`]: /functions/partials/include/
|
||||
[`return`]: /functions/go-template/return/
|
||||
[`schema.html`]: /templates/embedded/#schema
|
||||
[`twitter_cards.html`]: /templates/embedded/#x-twitter-cards
|
||||
[inline partial]: /templates/partial/#inline-partials
|
||||
|
||||
@@ -68,7 +68,7 @@ Specify `level`, `scale`, and `targetDir` as needed to achieve the desired resul
|
||||
|
||||
To include a QR code that points to the `Permalink` of the current page:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with images.QR .Permalink }}
|
||||
<img
|
||||
src="{{ .RelPermalink }}"
|
||||
|
||||
@@ -12,14 +12,14 @@ params:
|
||||
|
||||
The counter is global for both monolingual and multilingual sites, and its initial value for each build is 1.
|
||||
|
||||
```go-html-template
|
||||
{{ warnf "single.html called %d times" math.Counter }}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ warnf "page.html called %d times" math.Counter }}
|
||||
```
|
||||
|
||||
```sh
|
||||
WARN single.html called 1 times
|
||||
WARN single.html called 2 times
|
||||
WARN single.html called 3 times
|
||||
```text
|
||||
WARN page.html called 1 times
|
||||
WARN page.html called 2 times
|
||||
WARN page.html called 3 times
|
||||
```
|
||||
|
||||
Use this function to:
|
||||
|
||||
@@ -19,7 +19,7 @@ In this example we have three partial templates:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── partials/
|
||||
└── _partials/
|
||||
├── average.html
|
||||
├── breadcrumbs.html
|
||||
└── footer.html
|
||||
|
||||
@@ -16,7 +16,7 @@ Without a [`return`] statement, the `partialCached` function returns a string of
|
||||
The `partialCached` function can offer significant performance gains for complex templates that don't need to be re-rendered on every invocation.
|
||||
|
||||
> [!note]
|
||||
> Each Site (or language) has its own `partialCached` cache, so each site will execute a partial once.
|
||||
> Each site (or language) has its own `partialCached` cache, so each site will execute a partial once.
|
||||
>
|
||||
> Hugo renders pages in parallel, and will render the partial more than once with concurrent calls to the `partialCached` function. After Hugo caches the rendered partial, new pages entering the build pipeline will use the cached result.
|
||||
|
||||
@@ -28,7 +28,7 @@ Here is the simplest usage:
|
||||
|
||||
Pass additional arguments to `partialCached` to create variants of the cached partial. For example, if you have a complex partial that should be identical when rendered for pages within the same section, use a variant based on section so that the partial is only rendered once per section:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
{{ partialCached "footer.html" . .Section }}
|
||||
```
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ debug = true
|
||||
|
||||
To visually mark where a template begins and ends execution:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ define "main" }}
|
||||
{{ if site.Params.debug }}
|
||||
<div class="debug">[entering {{ templates.Current.Filename }}]</div>
|
||||
@@ -66,7 +66,7 @@ To visually mark where a template begins and ends execution:
|
||||
|
||||
To display the chain of templates that led to the current one, create a partial template that iterates through its ancestors:
|
||||
|
||||
```go-html-template {file="layouts/partials/template-call-stack.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/template-call-stack.html" copy=true}
|
||||
{{ with templates.Current }}
|
||||
<div class="debug">
|
||||
{{ range .Ancestors }}
|
||||
@@ -81,7 +81,7 @@ To display the chain of templates that led to the current one, create a partial
|
||||
|
||||
Then call the partial from any template:
|
||||
|
||||
```go-html-template {file="layouts/partials/footer/copyright.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/footer/copyright.html" copy=true}
|
||||
{{ if site.Params.debug }}
|
||||
{{ partial "template-call-stack.html" . }}
|
||||
{{ end }}
|
||||
@@ -90,15 +90,15 @@ Then call the partial from any template:
|
||||
The rendered template stack would look something like this:
|
||||
|
||||
```text
|
||||
/home/user/project/layouts/partials/footer/copyright.html
|
||||
/home/user/project/themes/foo/layouts/partials/footer.html
|
||||
/home/user/project/layouts/_default/single.html
|
||||
/home/user/project/themes/foo/layouts/_default/baseof.html
|
||||
/home/user/project/layouts/_partials/footer/copyright.html
|
||||
/home/user/project/themes/foo/layouts/_partials/footer.html
|
||||
/home/user/project/layouts/page.html
|
||||
/home/user/project/themes/foo/layouts/baseof.html
|
||||
```
|
||||
|
||||
To reverse the order of the entries, chain the `Reverse` method to the `Ancestors` method:
|
||||
|
||||
```go-html-template {file="layouts/partials/template-call-stack.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/template-call-stack.html" copy=true}
|
||||
{{ with templates.Current }}
|
||||
<div class="debug">
|
||||
{{ range .Ancestors.Reverse }}
|
||||
@@ -115,7 +115,7 @@ To reverse the order of the entries, chain the `Reverse` method to the `Ancestor
|
||||
|
||||
To render links that, when clicked, will open the template in Microsoft Visual Studio Code, create a partial template with anchor elements that use the `vscode` URI scheme:
|
||||
|
||||
```go-html-template {file="layouts/partials/template-open-in-vs-code.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/template-open-in-vs-code.html" copy=true}
|
||||
{{ with templates.Current.Parent }}
|
||||
<div class="debug">
|
||||
<a href="vscode://file/{{ .Filename }}">{{ .Name }}</a>
|
||||
@@ -128,7 +128,7 @@ To render links that, when clicked, will open the template in Microsoft Visual S
|
||||
|
||||
Then call the partial from any template:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html" copy=true}
|
||||
```go-html-template {file="layouts/page.html" copy=true}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
@@ -141,7 +141,7 @@ Then call the partial from any template:
|
||||
|
||||
Use the same approach to render the entire call stack as links:
|
||||
|
||||
```go-html-template {file="layouts/partials/template-call-stack.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/template-call-stack.html" copy=true}
|
||||
{{ with templates.Current }}
|
||||
<div class="debug">
|
||||
{{ range .Ancestors }}
|
||||
|
||||
@@ -17,7 +17,7 @@ Use the `templates.Exists` function with dynamic template paths:
|
||||
|
||||
```go-html-template
|
||||
{{ $partialPath := printf "headers/%s.html" .Type }}
|
||||
{{ if templates.Exists ( printf "partials/%s" $partialPath ) }}
|
||||
{{ if templates.Exists ( printf "_partials/%s" $partialPath ) }}
|
||||
{{ partial $partialPath . }}
|
||||
{{ else }}
|
||||
{{ partial "headers/default.html" . }}
|
||||
|
||||
@@ -115,7 +115,7 @@ inline = [['\(', '\)']]
|
||||
|
||||
Create a [passthrough render hook] to capture and render the LaTeX markup.
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-passthrough.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-passthrough.html" copy=true}
|
||||
{{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq .Type "block") }}
|
||||
{{- with try (transform.ToMath .Inner $opts) }}
|
||||
{{- with .Err }}
|
||||
@@ -131,7 +131,7 @@ Create a [passthrough render hook] to capture and render the LaTeX markup.
|
||||
|
||||
In your base template, conditionally include the KaTeX CSS within the head element.
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html" copy=true}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
<head>
|
||||
{{ $noop := .WordCount }}
|
||||
{{ if .Page.Store.Get "hasMath" }}
|
||||
|
||||
@@ -31,7 +31,7 @@ For example:
|
||||
|
||||
When using `transform.XMLEscape` in a template rendered by Go's [html/template] package, declare the string to be safe HTML to avoid double escaping. For example, in an RSS template:
|
||||
|
||||
```xml {file="layouts/_default/rss.xml"}
|
||||
```xml {file="layouts/rss.xml"}
|
||||
<description>{{ .Summary | transform.XMLEscape | safeHTML }}</description>
|
||||
```
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ weight = 20
|
||||
|
||||
With this template code:
|
||||
|
||||
```go-html-template {file="layouts/partials/menu.html"}
|
||||
```go-html-template {file="layouts/_partials/menu.html"}
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
@@ -83,7 +83,7 @@ In the above note that the `href` attribute of the second `anchor` element is bl
|
||||
|
||||
With this template code:
|
||||
|
||||
```go-html-template {file="layouts/partials/menu.html"}
|
||||
```go-html-template {file="layouts/_partials/menu.html"}
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ or .URL .PageRef }}">{{ .Name }}</a></li>
|
||||
|
||||
@@ -14,7 +14,7 @@ The `Data` method on a `Page` object returns a unique data object for each [page
|
||||
> [!note]
|
||||
> The `Data` method is only useful within [taxonomy](g) and [term](g) templates.
|
||||
>
|
||||
> Themes that are not actively maintained may still use `.Data.Pages` in list templates. Although that syntax remains functional, use one of these methods instead: [`Pages`], [`RegularPages`], or [`RegularPagesRecursive`]
|
||||
> Themes that are not actively maintained may still use `.Data.Pages` in their templates. Although that syntax remains functional, use one of these methods instead: [`Pages`], [`RegularPages`], or [`RegularPagesRecursive`]
|
||||
|
||||
The examples that follow are based on this site configuration:
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ title = 'How to make spicy tuna hand rolls'
|
||||
description = 'Instructions for making spicy tuna hand rolls.'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
<head>
|
||||
...
|
||||
<meta name="description" content="{{ .Description }}">
|
||||
|
||||
@@ -9,9 +9,9 @@ params:
|
||||
signatures: [PAGE1.Eq PAGE2]
|
||||
---
|
||||
|
||||
In this contrived example from a single template, we list all pages in the current section except for the current page.
|
||||
In this contrived example we list all pages in the current section except for the current page.
|
||||
|
||||
```go-html-template
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $currentPage := . }}
|
||||
{{ range .CurrentSection.Pages }}
|
||||
{{ if not (.Eq $currentPage) }}
|
||||
|
||||
@@ -37,7 +37,7 @@ content/
|
||||
|
||||
The examples below depict the result of rendering `works/paintings/the-mona-lisa.md`:
|
||||
|
||||
```go-html-template {file="layouts/works/single.html"}
|
||||
```go-html-template {file="layouts/works/page.html"}
|
||||
{{ with .GetPage "starry-night" }}
|
||||
{{ .Title }} → Starry Night
|
||||
{{ end }}
|
||||
|
||||
@@ -29,7 +29,7 @@ By example, let's use [Plotly] to render a chart:
|
||||
|
||||
The shortcode is simple:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/plotly.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/plotly.html"}
|
||||
{{ $id := printf "plotly-%02d" .Ordinal }}
|
||||
<div id="{{ $id }}"></div>
|
||||
<script>
|
||||
@@ -39,7 +39,7 @@ The shortcode is simple:
|
||||
|
||||
Now we can selectively load the required JavaScript on pages that call the "plotly" shortcode:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
```go-html-template {file="layouts/baseof.html"}
|
||||
<head>
|
||||
...
|
||||
{{ if .HasShortcode "plotly" }}
|
||||
|
||||
@@ -22,12 +22,13 @@ Hugo will render the page using contact.html.
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
├── baseof.html
|
||||
├── contact.html
|
||||
├── home.html
|
||||
├── list.html
|
||||
└── single.html
|
||||
├── baseof.html
|
||||
├── contact.html
|
||||
├── home.html
|
||||
├── page.html
|
||||
├── section.html
|
||||
├── taxonomy.html
|
||||
└── term.html
|
||||
```
|
||||
|
||||
Although rarely used within a template, you can access the value with:
|
||||
|
||||
@@ -11,19 +11,19 @@ params:
|
||||
|
||||
This is a convenience method, useful within partial templates that are called from both [shortcodes](g) and page templates.
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/foo.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/foo.html"}
|
||||
{{ partial "my-partial.html" . }}
|
||||
```
|
||||
|
||||
When the shortcode calls the partial, it passes the current [context](g) (the dot). The context includes identifiers such as `Page`, `Params`, `Inner`, and `Name`.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ partial "my-partial.html" . }}
|
||||
```
|
||||
|
||||
When the page template calls the partial, it also passes the current context (the dot). But in this case, the dot _is_ the `Page` object.
|
||||
|
||||
```go-html-template {file="layouts/partials/my-partial.html"}
|
||||
```go-html-template {file="layouts/_partials/my-partial.html"}
|
||||
The page title is: {{ .Page.Title }}
|
||||
```
|
||||
|
||||
|
||||
@@ -20,13 +20,13 @@ By default, the number of elements on each pager is determined by your [site con
|
||||
|
||||
You can invoke pagination on the [home template], [section templates], [taxonomy templates], and [term templates].
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ $pages := where .Site.RegularPages "Section" "articles" }}
|
||||
{{ $pages = $pages.ByTitle }}
|
||||
{{ range (.Paginate $pages 7).Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
{{ end }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
In the example above, we:
|
||||
|
||||
@@ -15,11 +15,11 @@ The number of elements on each pager is determined by your [site configuration].
|
||||
|
||||
You can invoke pagination on the [home template], [section templates], [taxonomy templates], and [term templates]. Each of these receives a collection of regular pages in [context](g). When you invoke the `Paginator` method, it paginates the page collection received in context.
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
```go-html-template {file="layouts/section.html"}
|
||||
{{ range .Paginator.Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
In the example above, the embedded pagination template creates navigation links between pagers.
|
||||
|
||||
@@ -26,22 +26,21 @@ Although similar to the [`partial`] function, there are key differences.
|
||||
`Render` method|`partial` function|
|
||||
:--|:--
|
||||
The `Page` object is automatically passed to the given template. You cannot pass additional context.| You must specify the context, allowing you to pass a combination of objects, slices, maps, and scalars.
|
||||
The path to the template is determined by the [content type](g).|You must specify the path to the template, relative to the `layouts/partials` directory.
|
||||
The path to the template is determined by the [content type](g).|You must specify the path to the template, relative to the `layouts/_partials` directory.
|
||||
|
||||
Consider this layout structure:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
├── _default/
|
||||
│ ├── baseof.html
|
||||
│ ├── home.html
|
||||
│ ├── li.html <-- used for other content types
|
||||
│ ├── list.html
|
||||
│ ├── single.html
|
||||
│ └── summary.html
|
||||
└── books/
|
||||
├── li.html <-- used when content type is "books"
|
||||
└── summary.html
|
||||
├── books/
|
||||
│ └── li.html <-- used when content type is "books"
|
||||
├── baseof.html
|
||||
├── home.html
|
||||
├── li.html <-- used for other content types
|
||||
├── page.html
|
||||
├── section.html
|
||||
├── taxonomy.html
|
||||
└── term.html
|
||||
```
|
||||
|
||||
And this template:
|
||||
@@ -63,10 +62,10 @@ layouts/books/li.html
|
||||
For all other content types the `Render` methods calls:
|
||||
|
||||
```text
|
||||
layouts/_default/li.html
|
||||
layouts/li.html
|
||||
```
|
||||
|
||||
See [content views] for more examples.
|
||||
|
||||
[content views]: /templates/content-view/
|
||||
[content views]: /templates/types/#content-view
|
||||
[`partial`]: /functions/partials/include/
|
||||
|
||||
@@ -13,7 +13,7 @@ Use this method in shortcode templates to compose a page from multiple content f
|
||||
|
||||
For example:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/include.html" copy=true}
|
||||
```go-html-template {file="layouts/_shortcodes/include.html" copy=true}
|
||||
{{ with .Get 0 }}
|
||||
{{ with $.Page.GetPage . }}
|
||||
{{- .RenderShortcodes }}
|
||||
|
||||
@@ -58,7 +58,7 @@ changeFreq = 'hourly'
|
||||
|
||||
And this simplistic sitemap template:
|
||||
|
||||
```xml {file="layouts/_default/sitemap.xml"}
|
||||
```xml {file="layouts/sitemap.xml"}
|
||||
{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
@@ -24,5 +24,5 @@ Use the `PageGroups` method with any of the [grouping methods].
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
@@ -17,5 +17,5 @@ params:
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
@@ -15,7 +15,7 @@ Based on front matter, Hugo uses several factors to identify content related to
|
||||
|
||||
The argument passed to the `Related` method may be a `Page` or an options map. For example, to pass the current page:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with .Site.RegularPages.Related . | first 5 }}
|
||||
<p>Related pages:</p>
|
||||
<ul>
|
||||
@@ -28,7 +28,7 @@ The argument passed to the `Related` method may be a `Page` or an options map. F
|
||||
|
||||
To pass an options map:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $opts := dict
|
||||
"document" .
|
||||
"indices" (slice "tags" "keywords")
|
||||
|
||||
@@ -36,7 +36,7 @@ content/
|
||||
|
||||
With the structure above, we can range through page resources of type `page` to build content:
|
||||
|
||||
```go-html-template {file="layouts/lessons/single.html"}
|
||||
```go-html-template {file="layouts/lessons/page.html"}
|
||||
{{ range .Resources.ByType "page" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
||||
@@ -24,7 +24,7 @@ This shortcode call uses positional arguments:
|
||||
|
||||
To retrieve arguments by position:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ printf "%s %s." (.Get 0) (.Get 1) }} → Hello world.
|
||||
```
|
||||
|
||||
@@ -38,7 +38,7 @@ This shortcode call uses named arguments:
|
||||
|
||||
To retrieve arguments by name:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ printf "%s %s." (.Get "greeting") (.Get "firstName") }} → Hello world.
|
||||
```
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ We design the **best** widgets in the world.
|
||||
|
||||
With this shortcode:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/card.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/card.html"}
|
||||
<div class="card">
|
||||
{{ with .Get "title" }}
|
||||
<div class="card-title">{{ . }}</div>
|
||||
@@ -51,7 +51,7 @@ Is rendered to:
|
||||
|
||||
Let's modify the example above to pass the value returned by `Inner` through the [`RenderString`] method on the `Page` object:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/card.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/card.html"}
|
||||
<div class="card">
|
||||
{{ with .Get "title" }}
|
||||
<div class="card-title">{{ . }}</div>
|
||||
@@ -98,7 +98,7 @@ This configuration is not unsafe if _you_ control the content. Read more about H
|
||||
|
||||
Second, because we are rendering the entire shortcode as Markdown, we must adhere to the rules governing [indentation] and inclusion of [raw HTML blocks] as provided in the [CommonMark] specification.
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/card.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/card.html"}
|
||||
<div class="card">
|
||||
{{ with .Get "title" }}
|
||||
<div class="card-title">{{ . }}</div>
|
||||
@@ -113,8 +113,8 @@ Second, because we are rendering the entire shortcode as Markdown, we must adher
|
||||
The difference between this and the previous example is subtle but required. Note the change in indentation, the addition of a blank line, and removal of the `RenderString` method.
|
||||
|
||||
```diff
|
||||
--- layouts/shortcodes/a.html
|
||||
+++ layouts/shortcodes/b.html
|
||||
--- layouts/_shortcodes/a.html
|
||||
+++ layouts/_shortcodes/b.html
|
||||
@@ -1,8 +1,9 @@
|
||||
<div class="card">
|
||||
{{ with .Get "title" }}
|
||||
|
||||
@@ -35,7 +35,7 @@ In the example above, notice that the content between the opening and closing sh
|
||||
|
||||
With this shortcode, calling `Inner` instead of `InnerDeindent`:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/gallery.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/gallery.html"}
|
||||
<div class="gallery">
|
||||
{{ .Inner | strings.TrimSpace | .Page.RenderString }}
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@ Hugo renders the Markdown to:
|
||||
|
||||
Although technically correct per the CommonMark specification, this is not what we want. If we remove the indentation using the `InnerDeindent` method:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/gallery.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/gallery.html"}
|
||||
<div class="gallery">
|
||||
{{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ To support both positional and named arguments when calling a shortcode, use the
|
||||
|
||||
With this shortcode template:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ if .IsNamedParams }}
|
||||
{{ printf "%s %s." (.Get "greeting") (.Get "firstName") }}
|
||||
{{ else }}
|
||||
|
||||
@@ -11,7 +11,7 @@ params:
|
||||
|
||||
The `Name` method is useful for error reporting. For example, if your shortcode requires a "greeting" argument:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ $greeting := "" }}
|
||||
{{ with .Get "greeting" }}
|
||||
{{ $greeting = . }}
|
||||
|
||||
@@ -24,7 +24,7 @@ This method is useful for, among other things, assigning unique element IDs when
|
||||
|
||||
This shortcode performs error checking, then renders an HTML `img` element with a unique `id` attribute:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/img.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/img.html"}
|
||||
{{ $src := "" }}
|
||||
{{ with .Get "src" }}
|
||||
{{ $src = . }}
|
||||
|
||||
@@ -26,7 +26,7 @@ Calling this shortcode:
|
||||
|
||||
We can access the front matter values using the `Page` method:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/book-details.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/book-details.html"}
|
||||
<ul>
|
||||
<li>Title: {{ .Page.Title }}</li>
|
||||
<li>Author: {{ .Page.Params.author }}</li>
|
||||
|
||||
@@ -15,7 +15,7 @@ When you call a shortcode using positional arguments, the `Params` method return
|
||||
{{</* myshortcode "Hello" "world" */>}}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ index .Params 0 }} → Hello
|
||||
{{ index .Params 1 }} → world
|
||||
```
|
||||
@@ -26,7 +26,7 @@ When you call a shortcode using named arguments, the `Params` method returns a m
|
||||
{{</* myshortcode greeting="Hello" name="world" */>}}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ .Params.greeting }} → Hello
|
||||
{{ .Params.name }} → world
|
||||
```
|
||||
|
||||
@@ -19,13 +19,13 @@ Welcome. Today is {{</* now */>}}.
|
||||
{{</* /greeting */>}}
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/greeting.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/greeting.html"}
|
||||
<div class="greeting">
|
||||
{{ .Inner | strings.TrimSpace | .Page.RenderString }}
|
||||
</div>
|
||||
```
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/now.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/now.html"}
|
||||
{{- $dateFormat := "January 2, 2006 15:04:05" }}
|
||||
|
||||
{{- with .Params }}
|
||||
|
||||
@@ -11,7 +11,7 @@ params:
|
||||
|
||||
The `Position` method is useful for error reporting. For example, if your shortcode requires a "greeting" argument:
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/myshortcode.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/myshortcode.html"}
|
||||
{{ $greeting := "" }}
|
||||
{{ with .Get "greeting" }}
|
||||
{{ $greeting = . }}
|
||||
|
||||
@@ -140,7 +140,7 @@ The following example displays all terms in a site's tags taxonomy:
|
||||
```
|
||||
This example will list all taxonomies and their terms, as well as all the content assigned to each of the terms.
|
||||
|
||||
```go-html-template {file="layouts/partials/all-taxonomies.html"}
|
||||
```go-html-template {file="layouts/_partials/all-taxonomies.html"}
|
||||
{{ with .Site.Taxonomies }}
|
||||
{{ $numberOfTerms := 0 }}
|
||||
{{ range $taxonomy, $terms := . }}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: content type
|
||||
reference: /content-management/types
|
||||
---
|
||||
|
||||
A _content type_ is a classification of content inferred from the top-level directory name or the `type` set in [front matter](g). Pages in the root of the `content` directory, including the home page, are of type "page". Accessed via `.Page.Type` in [_templates_](g).
|
||||
A _content type_ is a classification of content inferred from the top-level directory name or the `type` set in [front matter](g). Pages in the root of the `content` directory, including the home page, are of type "page". The content type is a contributing factor in the template lookup order and determines which [archetype](/content-management/archetypes/) template to use when creating new content.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: content view
|
||||
reference: /templates/content-view
|
||||
reference: /templates/types/#content-view
|
||||
---
|
||||
|
||||
A _content view_ is a template called with the [`Render`](/methods/page/render/) method on a `Page` object.
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: list template
|
||||
---
|
||||
|
||||
A _list template_ is any [_template_](g) that renders a [_list page_](g). This includes home, [_section_](g), [_taxonomy_](g), and [_term_](g) templates.
|
||||
@@ -53,7 +53,7 @@ Type
|
||||
|
||||
In its default configuration, Hugo renders Markdown blockquotes according to the [CommonMark specification]. To create a render hook that does the same thing:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-blockquote.html" copy=true}
|
||||
<blockquote>
|
||||
{{ .Text }}
|
||||
</blockquote>
|
||||
@@ -61,7 +61,7 @@ In its default configuration, Hugo renders Markdown blockquotes according to the
|
||||
|
||||
To render a blockquote as an HTML `figure` element with an optional citation and caption:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-blockquote.html" copy=true}
|
||||
<figure>
|
||||
<blockquote {{ with .Attributes.cite }}cite="{{ . }}"{{ end }}>
|
||||
{{ .Text }}
|
||||
@@ -126,7 +126,7 @@ The extended syntax is compatible with [Obsidian].
|
||||
|
||||
This blockquote render hook renders a multilingual alert if an alert designator is present, otherwise it renders a blockquote according to the CommonMark specification.
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-blockquote.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-blockquote.html" copy=true}
|
||||
{{ $emojis := dict
|
||||
"caution" ":exclamation:"
|
||||
"important" ":information_source:"
|
||||
@@ -168,10 +168,9 @@ Although you can use one template with conditional logic as shown above, you can
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-blockquote-alert.html
|
||||
└── render-blockquote-regular.html
|
||||
└── _markup/
|
||||
├── render-blockquote-alert.html
|
||||
└── render-blockquote-regular.html
|
||||
```
|
||||
|
||||
{{% include "/_common/render-hooks/pageinner.md" %}}
|
||||
|
||||
@@ -72,7 +72,7 @@ Type
|
||||
|
||||
In its default configuration, Hugo renders fenced code blocks by passing the code sample through the Chroma syntax highlighter and wrapping the result. To create a render hook that does the same thing:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-codeblock.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-codeblock.html" copy=true}
|
||||
{{ $result := transform.HighlightCodeBlock . }}
|
||||
{{ $result.Wrapped }}
|
||||
```
|
||||
@@ -81,16 +81,15 @@ Although you can use one template with conditional logic to control the behavior
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-codeblock-mermaid.html
|
||||
├── render-codeblock-python.html
|
||||
└── render-codeblock.html
|
||||
└── _markup/
|
||||
├── render-codeblock-mermaid.html
|
||||
├── render-codeblock-python.html
|
||||
└── render-codeblock.html
|
||||
```
|
||||
|
||||
For example, to create a code block render hook to render [Mermaid] diagrams:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-codeblock-mermaid.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-codeblock-mermaid.html" copy=true}
|
||||
<pre class="mermaid">
|
||||
{{ .Inner | htmlEscape | safeHTML }}
|
||||
</pre>
|
||||
@@ -99,7 +98,7 @@ For example, to create a code block render hook to render [Mermaid] diagrams:
|
||||
|
||||
Then include this snippet at the _bottom_ of your base template, before the closing `body` tag:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html" copy=true}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
{{ if .Store.Get "hasMermaid" }}
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
|
||||
|
||||
@@ -46,7 +46,7 @@ In its default configuration, Hugo renders Markdown headings according to the [C
|
||||
|
||||
[CommonMark specification]: https://spec.commonmark.org/current/
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-heading.html" copy=true}
|
||||
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
|
||||
{{- .Text -}}
|
||||
</h{{ .Level }}>
|
||||
@@ -54,7 +54,7 @@ In its default configuration, Hugo renders Markdown headings according to the [C
|
||||
|
||||
To add an anchor link to the right of each heading:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-heading.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-heading.html" copy=true}
|
||||
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
|
||||
{{ .Text }}
|
||||
<a href="#{{ .Anchor }}">#</a>
|
||||
|
||||
@@ -64,7 +64,7 @@ Title
|
||||
|
||||
In its default configuration, Hugo renders Markdown images according to the [CommonMark specification]. To create a render hook that does the same thing:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-image.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-image.html" copy=true}
|
||||
<img src="{{ .Destination | safeURL }}"
|
||||
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
|
||||
{{- with .Title }} title="{{ . }}"{{ end -}}
|
||||
@@ -74,7 +74,7 @@ In its default configuration, Hugo renders Markdown images according to the [Com
|
||||
|
||||
To render standalone images within `figure` elements:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-image.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-image.html" copy=true}
|
||||
{{- if .IsBlock -}}
|
||||
<figure>
|
||||
<img src="{{ .Destination | safeURL }}"
|
||||
|
||||
@@ -47,25 +47,23 @@ Each render hook is a template, with one template for each supported element typ
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-blockquote.html
|
||||
├── render-codeblock.html
|
||||
├── render-heading.html
|
||||
├── render-image.html
|
||||
├── render-link.html
|
||||
├── render-passthrough.html
|
||||
└── render-table.html
|
||||
└── _markup/
|
||||
├── render-blockquote.html
|
||||
├── render-codeblock.html
|
||||
├── render-heading.html
|
||||
├── render-image.html
|
||||
├── render-link.html
|
||||
├── render-passthrough.html
|
||||
└── render-table.html
|
||||
```
|
||||
|
||||
The template lookup order allows you to create different render hooks for each page [type](g), [kind](g), language, and [output format](g). For example:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
├── _default/
|
||||
│ └── _markup/
|
||||
│ ├── render-link.html
|
||||
│ └── render-link.rss.xml
|
||||
├── _markup/
|
||||
│ ├── render-link.html
|
||||
│ └── render-link.rss.xml
|
||||
├── books/
|
||||
│ └── _markup/
|
||||
│ ├── render-link.html
|
||||
|
||||
@@ -48,7 +48,7 @@ Title
|
||||
|
||||
In its default configuration, Hugo renders Markdown links according to the [CommonMark specification]. To create a render hook that does the same thing:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-link.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-link.html" copy=true}
|
||||
<a href="{{ .Destination | safeURL }}"
|
||||
{{- with .Title }} title="{{ . }}"{{ end -}}
|
||||
>
|
||||
@@ -59,7 +59,7 @@ In its default configuration, Hugo renders Markdown links according to the [Comm
|
||||
|
||||
To include a `rel` attribute set to `external` for external links:
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-link.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-link.html" copy=true}
|
||||
{{- $u := urls.Parse .Destination -}}
|
||||
<a href="{{ .Destination | safeURL }}"
|
||||
{{- with .Title }} title="{{ . }}"{{ end -}}
|
||||
|
||||
@@ -86,7 +86,7 @@ Instead of client-side JavaScript rendering of mathematical markup using MathJax
|
||||
|
||||
[`transform.ToMath`]: /functions/transform/tomath/
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-passthrough.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-passthrough.html" copy=true}
|
||||
{{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq .Type "block") }}
|
||||
{{- with try (transform.ToMath .Inner $opts) }}
|
||||
{{- with .Err }}
|
||||
@@ -100,7 +100,7 @@ Instead of client-side JavaScript rendering of mathematical markup using MathJax
|
||||
|
||||
Then, in your base template, conditionally include the KaTeX CSS within the head element:
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html" copy=true}
|
||||
```go-html-template {file="layouts/baseof.html" copy=true}
|
||||
<head>
|
||||
{{ $noop := .WordCount }}
|
||||
{{ if .Page.Store.Get "hasMath" }}
|
||||
@@ -115,10 +115,9 @@ Although you can use one template with conditional logic as shown above, you can
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
└── _markup/
|
||||
├── render-passthrough-block.html
|
||||
└── render-passthrough-inline.html
|
||||
└── _markup/
|
||||
├── render-passthrough-block.html
|
||||
└── render-passthrough-inline.html
|
||||
```
|
||||
|
||||
{{% include "/_common/render-hooks/pageinner.md" %}}
|
||||
|
||||
@@ -57,7 +57,7 @@ In its default configuration, Hugo renders Markdown tables according to the [Git
|
||||
|
||||
[GitHub Flavored Markdown specification]: https://github.github.com/gfm/#tables-extension-
|
||||
|
||||
```go-html-template {file="layouts/_default/_markup/render-table.html" copy=true}
|
||||
```go-html-template {file="layouts/_markup/render-table.html" copy=true}
|
||||
<table
|
||||
{{- range $k, $v := .Attributes }}
|
||||
{{- if $v }}
|
||||
|
||||
@@ -9,7 +9,7 @@ keywords: []
|
||||
{{< new-in 0.140.0 />}}
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ expiryDate: 2027-02-01 # deprecated 2025-02-01 in v0.143.0
|
||||
{{< deprecated-in 0.143.0 >}}
|
||||
The `gist` shortcode was deprecated in version 0.143.0 and will be removed in a future release. To continue embedding GitHub Gists in your content, you'll need to create a custom shortcode:
|
||||
|
||||
1. Create a new file: Create a file named `gist.html` within the `layouts/shortcodes` directory.
|
||||
1. Create a new file: Create a file named `gist.html` within the `layouts/_shortcodes` directory.
|
||||
1. Copy the source code: Paste the [original source code]({{% eturl gist %}}) of the gist shortcode into the newly created `gist.html` file.
|
||||
|
||||
This will allow you to maintain the functionality of embedding GitHub Gists in your content after the deprecation of the original shortcode.
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: [highlight]
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
> [!note]
|
||||
> With the Markdown [content format], the `highlight` shortcode is rarely needed because, by default, Hugo automatically applies syntax highlighting to fenced code blocks.
|
||||
@@ -77,7 +77,7 @@ This is some {{< highlight go "hl_inline=true, noClasses=true" >}}fmt.Println("i
|
||||
|
||||
Given the verbosity of the example above, if you need to frequently highlight inline code snippets, create your own shortcode using a shorter name with preset options.
|
||||
|
||||
```go-html-template {file="layouts/shortcodes/hl.html"}
|
||||
```go-html-template {file="layouts/_shortcodes/hl.html"}
|
||||
{{ $code := .Inner | strings.TrimSpace }}
|
||||
{{ $lang := or (.Get 0) "go" }}
|
||||
{{ $opts := dict "hl_inline" true "noClasses" true }}
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
The `param` shortcode renders a parameter from front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ keywords: []
|
||||
{{< new-in 0.141.0 />}}
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
> [!note]
|
||||
> When working with Markdown, this shortcode is obsolete. Instead, use a [link render hook] that resolves the link destination using the `GetPage` method on the `Page` object. You can either create your own, or simply enable the [embedded link render hook]. The embedded link render hook is automatically enabled for multilingual single-host projects.
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
> [!note]
|
||||
> When working with Markdown, this shortcode is obsolete. Instead, use a [link render hook] that resolves the link destination using the `GetPage` method on the `Page` object. You can either create your own, or simply enable the [embedded link render hook]. The embedded link render hook is automatically enabled for multilingual single-host projects.
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ keywords: []
|
||||
{{< new-in 0.141.0 />}}
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `x` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `x` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ keywords: []
|
||||
---
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
> To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the `layouts/_shortcodes` directory.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: Base templates
|
||||
description: The base and block construct allows you to define the outer shell of your master templates (i.e., the chrome of the page).
|
||||
categories: []
|
||||
keywords: []
|
||||
weight: 40
|
||||
aliases: [/templates/blocks/,/templates/base-templates-and-blocks/]
|
||||
---
|
||||
|
||||
{{< newtemplatesystem >}}
|
||||
|
||||
The `block` keyword allows you to define the outer shell of your pages' one or more master template(s) and then fill in or override portions as necessary.
|
||||
|
||||
{{< youtube QVOMCYitLEc >}}
|
||||
|
||||
## Base template lookup order
|
||||
|
||||
The base template lookup order closely follows that of the template it applies to (e.g. `_default/list.html`).
|
||||
|
||||
See [Template Lookup Order](/templates/lookup-order/) for details and examples.
|
||||
|
||||
## Define the base template
|
||||
|
||||
The following defines a simple base template at `_default/baseof.html`. As a default template, it is the shell from which all your pages will be rendered unless you specify another `*baseof.html` closer to the beginning of the lookup order.
|
||||
|
||||
```go-html-template {file="layouts/_default/baseof.html"}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ block "title" . }}
|
||||
<!-- Blocks may include default content. -->
|
||||
{{ .Site.Title }}
|
||||
{{ end }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Code that all your templates share, like a header -->
|
||||
{{ block "main" . }}
|
||||
<!-- The part of the page that begins to differ between templates -->
|
||||
{{ end }}
|
||||
{{ block "footer" . }}
|
||||
<!-- More shared code, perhaps a footer but that can be overridden if need be in -->
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Override the base template
|
||||
|
||||
The default list template will inherit all of the code defined above and can then implement its own `"main"` block from:
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
{{ define "main" }}
|
||||
<h1>Posts</h1>
|
||||
{{ range .Pages }}
|
||||
<article>
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
This replaces the contents of our (basically empty) `main` block with something useful for the list template. In this case, we didn't define a `title` block, so the contents from our base template remain unchanged in lists.
|
||||
|
||||
> [!warning]
|
||||
> Only [template comments] are allowed outside a block's `define` and `end` statements. Avoid placing any other text, including HTML comments, outside these boundaries. Doing so will cause rendering issues, potentially resulting in a blank page. See the example below.
|
||||
|
||||
```go-html-template {file="layouts/_default/do-not-do-this.html"}
|
||||
<div>This div element broke your template.</div>
|
||||
{{ define "main" }}
|
||||
<h2>{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
<!-- An HTML comment will break your template too. -->
|
||||
```
|
||||
|
||||
The following shows how you can override both the `main` and `title` block areas from the base template with code unique to your default [single template]:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
{{ define "title" }}
|
||||
<!-- This will override the default value set in baseof.html; i.e., "{{ .Site.Title }}" in the original example-->
|
||||
{{ .Title }} – {{ .Site.Title }}
|
||||
{{ end }}
|
||||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
[single template]: /templates/types/#single
|
||||
[template comments]: /templates/introduction/#comments
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: Content view templates
|
||||
description: Hugo can render alternative views of your content, useful in list and summary views.
|
||||
categories: []
|
||||
keywords: []
|
||||
weight: 110
|
||||
aliases: [/templates/views/]
|
||||
---
|
||||
|
||||
{{< newtemplatesystem >}}
|
||||
|
||||
The following are common use cases for content views:
|
||||
|
||||
- You want content of every type to be shown on the home page but only with limited [summary views][summaries].
|
||||
- You only want a bulleted list of your content in a [taxonomy template]. Views make this very straightforward by delegating the rendering of each different type of content to the content itself.
|
||||
|
||||
## Create a content view
|
||||
|
||||
To create a new view, create a template in each of your different content type directories with the view name. The following example contains an "li" view and a "summary" view for the `posts` and `project` content types. As you can see, these sit next to the [single template], `single.html`. You can even provide a specific view for a given type and continue to use the `_default/single.html` for the primary view.
|
||||
|
||||
```txt
|
||||
layouts/
|
||||
├── posts/
|
||||
│ ├── li.html
|
||||
│ ├── single.html
|
||||
│ └── summary.html
|
||||
├── project/
|
||||
│ ├── li.html
|
||||
│ └── single.html
|
||||
└── summary.html
|
||||
```
|
||||
|
||||
## Which template will be rendered?
|
||||
|
||||
The following is the lookup order for content views ordered by specificity.
|
||||
|
||||
1. `/layouts/<TYPE>/<VIEW>.html`
|
||||
1. `/layouts/<SECTION>/<VIEW>.html`
|
||||
1. `/layouts/_default/<VIEW>.html`
|
||||
1. `/themes/<THEME>/layouts/<TYPE>/<VIEW>.html`
|
||||
1. `/themes/<THEME>/layouts/<SECTION>/<VIEW>.html`
|
||||
1. `/themes/<THEME>/layouts/_default/<VIEW>.html`
|
||||
|
||||
## Example: content view inside a list
|
||||
|
||||
### list.html
|
||||
|
||||
In this example, `.Render` is passed into the template to call the [render function][render]. `.Render` is a special function that instructs content to render itself with the view template provided as the first argument. In this case, the template is going to render the `summary.html` view that follows:
|
||||
|
||||
```go-html-template {file="layouts/_default/list.html"}
|
||||
<main id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary" }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
```
|
||||
|
||||
### summary.html
|
||||
|
||||
Hugo passes the `Page` object to the following `summary.html` view template.
|
||||
|
||||
```go-html-template {file="layouts/_default/summary.html"}
|
||||
<article class="post">
|
||||
<header>
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
|
||||
</header>
|
||||
{{ .Summary }}
|
||||
<footer>
|
||||
<a href='{{ .RelPermalink }}'>Read more »</a>
|
||||
</footer>
|
||||
</article>
|
||||
```
|
||||
|
||||
### li.html
|
||||
|
||||
Continuing on the previous example, we can change our render function to use a smaller `li.html` view by changing the argument in the call to the `.Render` function (i.e., `{{ .Render "li" }}`).
|
||||
|
||||
```go-html-template {file="layouts/_default/li.html"}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
[render]: /methods/page/render/
|
||||
[single template]: /templates/types/#single
|
||||
[summaries]: /content-management/summaries/
|
||||
[taxonomy template]: /templates/types/#taxonomy
|
||||
@@ -12,7 +12,7 @@ aliases: [/templates/internal]
|
||||
## Disqus
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded Disqus template, copy the [source code]({{% eturl disqus %}}) to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded Disqus template, copy the [source code]({{% eturl disqus %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "disqus.html" . }}`
|
||||
|
||||
@@ -21,7 +21,7 @@ Hugo includes an embedded template for [Disqus], a popular commenting system for
|
||||
To include the embedded template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
{{ partial "disqus.html" . }}
|
||||
```
|
||||
|
||||
### Configuration {#configuration-disqus}
|
||||
@@ -57,7 +57,7 @@ disable
|
||||
## Google Analytics
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded Google Analytics template, copy the [source code]({{% eturl google_analytics %}}) to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded Google Analytics template, copy the [source code]({{% eturl google_analytics %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "google_analytics.html" . }}`
|
||||
|
||||
@@ -66,7 +66,7 @@ Hugo includes an embedded template supporting [Google Analytics 4].
|
||||
To include the embedded template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
{{ partial "google_analytics.html" . }}
|
||||
```
|
||||
|
||||
### Configuration {#configuration-google-analytics}
|
||||
@@ -95,7 +95,7 @@ respectDoNotTrack
|
||||
## Open Graph
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded Open Graph template, copy the [source code]({{% eturl opengraph %}}) to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded Open Graph template, copy the [source code]({{% eturl opengraph %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "opengraph.html" . }}`
|
||||
|
||||
@@ -105,7 +105,7 @@ This format is used for Facebook and some other sites.
|
||||
To include the embedded template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
{{ partial "opengraph.html" . }}
|
||||
```
|
||||
|
||||
### Configuration {#configuration-open-graph}
|
||||
@@ -154,7 +154,7 @@ See [details](/templates/pagination/).
|
||||
## Schema
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded Schema template, copy the [source code]({{% eturl schema %}}) to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded Schema template, copy the [source code]({{% eturl schema %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "schema.html" . }}`
|
||||
|
||||
@@ -163,13 +163,13 @@ Hugo includes an embedded template to render [microdata] `meta` elements within
|
||||
To include the embedded template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/schema.html" . }}
|
||||
{{ partial "schema.html" . }}
|
||||
```
|
||||
|
||||
## X (Twitter) Cards
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded Twitter Cards template, copy the [source code]({{% eturl twitter_cards %}}) to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded Twitter Cards template, copy the [source code]({{% eturl twitter_cards %}}) to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "twitter_cards.html" . }}`
|
||||
|
||||
@@ -179,7 +179,7 @@ metadata used to attach rich media to Tweets linking to your site.
|
||||
To include the embedded template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
{{ partial "twitter_cards.html" . }}
|
||||
```
|
||||
|
||||
### Configuration {#configuration-x-cards}
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
title: Home page templates
|
||||
description: The home page of a website is often formatted differently than the other pages. For this reason, Hugo makes it easy for you to define your new site's home page as a unique template.
|
||||
categories: []
|
||||
keywords: []
|
||||
weight: 50
|
||||
aliases: [/layout/homepage/,/templates/homepage-template/,/templates/homepage/]
|
||||
---
|
||||
|
||||
{{< newtemplatesystem >}}
|
||||
|
||||
|
||||
## Introduction
|
||||
|
||||
A home page template is used to render your site's home page, and is the only template required for a single-page website. For example, the home page template below inherits the site's shell from the base template and renders the home page content, such as a list of other pages.
|
||||
|
||||
```go-html-template {file="layouts/_default/home.html"}
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ range site.RegularPages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
{{% include "/_common/filter-sort-group.md" %}}
|
||||
|
||||
## Lookup order
|
||||
|
||||
Hugo's [template lookup order] determines the template path, allowing you to create unique templates for any page.
|
||||
|
||||
> [!note]
|
||||
> You must have thorough understanding of the template lookup order when creating templates. Template selection is based on template type, page kind, content type, section, language, and output format.
|
||||
|
||||
## Content and front matter
|
||||
|
||||
The home page template uses content and front matter from an `_index.md` file located in the root of your content directory.
|
||||
|
||||
{{< code-toggle file=content/_index.md fm=true >}}
|
||||
---
|
||||
title: The Home Page
|
||||
date: 2025-01-30T03:36:57-08:00
|
||||
draft: false
|
||||
params:
|
||||
subtitle: The Subtitle
|
||||
---
|
||||
{{< /code-toggle >}}
|
||||
|
||||
The home page template below inherits the site's shell from the base template, renders the subtitle and content as defined in the `_index.md` file, then renders of list of the site's [regular pages](g).
|
||||
|
||||
```go-html-template {file="layouts/_default/home.html"}
|
||||
{{ define "main" }}
|
||||
<h3>{{ .Params.Subtitle }}</h3>
|
||||
{{ .Content }}
|
||||
{{ range site.RegularPages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
[template lookup order]: /templates/lookup-order/#home-templates
|
||||
@@ -41,7 +41,7 @@ For example, a template for a single page receives a `Page` object, and the `Pag
|
||||
|
||||
Within a template, the dot (`.`) represents the current context.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
<h2>{{ .Title }}</h2>
|
||||
```
|
||||
|
||||
@@ -49,7 +49,7 @@ In the example above the dot represents the `Page` object, and we call its [`Tit
|
||||
|
||||
The current context may change within a template. For example, at the top of a template the context might be a `Page` object, but we rebind the context to another value or object within [`range`] or [`with`] blocks.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
<h2>{{ .Title }}</h2>
|
||||
|
||||
{{ range slice "foo" "bar" }}
|
||||
@@ -74,7 +74,7 @@ In the example above, the context changes as we `range` through the [slice](g) o
|
||||
|
||||
Within a `range` or `with` block you can access the context passed into the template by prepending a dollar sign (`$`) to the dot:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ with "foo" }}
|
||||
<p>{{ $.Title }} - {{ . }}</p>
|
||||
{{ end }}
|
||||
@@ -95,7 +95,7 @@ In the examples above the paired opening and closing braces represent the beginn
|
||||
|
||||
A template action may contain literal values ([boolean](g), [string](g), [integer](g), and [float](g)), variables, functions, and methods.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $convertToLower := true }}
|
||||
{{ if $convertToLower }}
|
||||
<h2>{{ strings.ToLower .Title }}</h2>
|
||||
@@ -122,7 +122,7 @@ Hugo renders the above to:
|
||||
|
||||
Notice the blank lines and indentation in the previous example? Although irrelevant in production when you typically minify the output, you can remove the adjacent whitespace by using template action delimiters with hyphens:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{- $convertToLower := true -}}
|
||||
{{- if $convertToLower -}}
|
||||
<h2>{{ strings.ToLower .Title }}</h2>
|
||||
@@ -269,21 +269,21 @@ Object|Method|Description
|
||||
|
||||
Chain the method to its object with a dot (`.`) as shown below, remembering that the leading dot represents the [current context].
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ .Site.Title }} → My Site Title
|
||||
{{ .Page.Title }} → My Page Title
|
||||
```
|
||||
|
||||
The context passed into most templates is a `Page` object, so this is equivalent to the previous example:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ .Site.Title }} → My Site Title
|
||||
{{ .Title }} → My Page Title
|
||||
```
|
||||
|
||||
Some methods take an argument. Separate the argument from the method with a space. For example:
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ $page := .Page.GetPage "/books/les-miserables" }}
|
||||
{{ $page.Title }} → Les Misérables
|
||||
```
|
||||
@@ -329,11 +329,11 @@ To render an HTML comment, pass a string through the [`safeHTML`] template funct
|
||||
Use the [`template`] function to include one or more of Hugo's [embedded templates]:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
{{ template "_internal/opengraph" . }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ template "_internal/schema.html" . }}
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
{{ partial "google_analytics.html" . }}
|
||||
{{ partial "opengraph" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ partial "schema.html" . }}
|
||||
{{ partial "twitter_cards.html" . }}
|
||||
```
|
||||
|
||||
Use the [`partial`] or [`partialCached`] function to include one or more [partial templates]:
|
||||
@@ -343,7 +343,7 @@ Use the [`partial`] or [`partialCached`] function to include one or more [partia
|
||||
{{ partialCached "css.html" . }}
|
||||
```
|
||||
|
||||
Create your partial templates in the layouts/partials directory.
|
||||
Create your partial templates in the layouts/_partials directory.
|
||||
|
||||
> [!note]
|
||||
> In the examples above, note that we are passing the current context (the dot) to each of the templates.
|
||||
@@ -531,7 +531,7 @@ In the template example above, each of the keys is a valid identifier. For examp
|
||||
[html/template]: https://pkg.go.dev/html/template
|
||||
[methods]: /methods/
|
||||
[methods]: /methods/
|
||||
[partial templates]: /templates/partial
|
||||
[partial templates]: /templates/types/#partial
|
||||
[templates]: /templates/
|
||||
[text/template]: https://pkg.go.dev/text/template
|
||||
[variables]: #variables
|
||||
|
||||
@@ -93,60 +93,3 @@ layouts/
|
||||
└── contact.html <-- renders contact.md
|
||||
└── single.html <-- renders about.md
|
||||
```
|
||||
|
||||
## Home templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "Kind == home" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
## Single templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "Kind == page" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
## Section templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "Kind == section" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
## Taxonomy templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
The examples below assume the following site configuration:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[taxonomies]
|
||||
category = 'categories'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "Kind == taxonomy" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
## Term templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
The examples below assume the following site configuration:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[taxonomies]
|
||||
category = 'categories'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "Kind == term" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
## RSS templates
|
||||
|
||||
These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
|
||||
|
||||
The examples below assume the following site configuration:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[taxonomies]
|
||||
category = 'categories'
|
||||
{{< /code-toggle >}}
|
||||
|
||||
{{< datatable-filtered "output" "layouts" "OutputFormat == rss" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
|
||||
|
||||
@@ -23,7 +23,7 @@ The example below handles every combination.
|
||||
|
||||
This partial template recursively "walks" a menu structure, rendering a localized, accessible nested list.
|
||||
|
||||
```go-html-template {file="layouts/partials/menu.html" copy=true}
|
||||
```go-html-template {file="layouts/_partials/menu.html" copy=true}
|
||||
{{- $page := .page }}
|
||||
{{- $menuID := .menuID }}
|
||||
|
||||
@@ -35,7 +35,7 @@ This partial template recursively "walks" a menu structure, rendering a localize
|
||||
</nav>
|
||||
{{- end }}
|
||||
|
||||
{{- define "partials/inline/menu/walk.html" }}
|
||||
{{- define "_partials/inline/menu/walk.html" }}
|
||||
{{- $page := .page }}
|
||||
{{- range .menuEntries }}
|
||||
{{- $attrs := dict "href" .URL }}
|
||||
@@ -70,7 +70,7 @@ This partial template recursively "walks" a menu structure, rendering a localize
|
||||
|
||||
Call the partial above, passing a menu ID and the current page in context.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}
|
||||
```
|
||||
@@ -81,7 +81,7 @@ Regardless of how you [define menu entries], an entry associated with a page has
|
||||
|
||||
This simplistic example renders a page parameter named `version` next to each entry's `name`. Code defensively using `with` or `if` to handle entries where (a) the entry points to an external resource, or (b) the `version` parameter is not defined.
|
||||
|
||||
```go-html-template {file="layouts/_default/single.html"}
|
||||
```go-html-template {file="layouts/page.html"}
|
||||
{{- range site.Menus.main }}
|
||||
<a href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
@@ -103,7 +103,7 @@ When you define menu entries [in site configuration] or [in front matter], you c
|
||||
|
||||
This simplistic example renders a `class` attribute for each anchor element. Code defensively using `with` or `if` to handle entries where `params.class` is not defined.
|
||||
|
||||
```go-html-template {file="layouts/partials/menu.html"}
|
||||
```go-html-template {file="layouts/_partials/menu.html"}
|
||||
{{- range site.Menus.main }}
|
||||
<a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
|
||||
@@ -16,7 +16,7 @@ We have aimed to maintain as much backward compatibility as possible by mapping
|
||||
|
||||
| Description | Action required |
|
||||
| ------------- | ------------- |
|
||||
| The `_default` folder is removed. | Move all files in `layouts/_default` up to the `layouts/` root.|
|
||||
| The `_default` folder is removed. | Move all files in `layouts` up to the `layouts/` root.|
|
||||
| The `layouts/partials` folder is renamed to `layouts/_partials`. | Rename the folder. |
|
||||
| The `layouts/shortcodes` folder is renamed to `layouts/_shortcodes`. | Rename the folder. |
|
||||
| Any folder in `layouts` that does not start with `_` represents the root of a [Page path]. In [Hugo v0.146.0], this can be nested as deeply as needed, and `_shortcodes` and `_markup` folders can be placed at any level in the tree.| No action required.|
|
||||
@@ -24,7 +24,7 @@ We have aimed to maintain as much backward compatibility as possible by mapping
|
||||
|A template named `taxonomy.html` used to be a candidate for both Page kind `term` and `taxonomy`, now it's only considered for `taxonomy`.|Create both `taxonomy.html` and `term.html` or create a more general layout, e.g. `list.html`.|
|
||||
| For base templates (e.g., `baseof.html`), in previous Hugo versions, you could prepend one identifier (layout, type, or kind) with a hyphen in front of the baseof keyword.|Move that identifier after the first "dot," e.g., rename`list-baseof.html` to `baseof.list.html`.|
|
||||
| We have added a new `all` "catch-all" layout. This means that if you have, e.g., `layouts/all.html` and that is the only template, that layout will be used for all HTML page rendering.||
|
||||
| We have removed the concept of `_internal` Hugo templates.[^internal]|Replace constructs similar to `{{ template "_internal/opengraph.html" . }}` with `{{ partial "opengraph.html" . }}`.|
|
||||
| We have removed the concept of `_internal` Hugo templates.[^internal]|Replace constructs similar to `{{ partial "opengraph.html" . }}` with `{{ partial "opengraph.html" . }}`.|
|
||||
| The identifiers that can be used in a template filename are one of the [Page kinds] (`home`, `page`, `section`, `taxonomy`, or `term`), one of the standard layouts (`list`, `single`, or `all`), a custom layout (as defined in the `layout` front matter field), a language (e.g., `en`), an output format (e.g., `html`, `rss`), and a suffix representing the media type. E.g., `all.en.html` and `home.rss.xml`.||
|
||||
| The above means that there's no such thing as an `index.html` template for the home page anymore. | Rename `index.html` to `home.html`.|
|
||||
|
||||
@@ -56,33 +56,33 @@ For templates placed in a `layouts` folder partly or completely matching a [Page
|
||||
|
||||
## Example folder structure
|
||||
|
||||
```
|
||||
```text
|
||||
layouts
|
||||
├── baseof.html
|
||||
├── baseof.term.html
|
||||
├── home.html
|
||||
├── list.html
|
||||
├── single.html
|
||||
├── page.html
|
||||
├── section.html
|
||||
├── taxonomy.html
|
||||
├── term.html
|
||||
├── term.mylayout.en.rss.xml
|
||||
├── _markup
|
||||
│ ├── render-codeblock-go.term.mylayout.no.rss.xml
|
||||
│ └── render-link.html
|
||||
│ ├── render-codeblock-go.term.mylayout.no.rss.xml
|
||||
│ └── render-link.html
|
||||
├── _partials
|
||||
│ └── mypartial.html
|
||||
│ └── mypartial.html
|
||||
├── _shortcodes
|
||||
│ ├── myshortcode.html
|
||||
│ └── myshortcode.section.mylayout.en.rss.xml
|
||||
│ ├── myshortcode.html
|
||||
│ └── myshortcode.section.mylayout.en.rss.xml
|
||||
├── docs
|
||||
│ ├── baseof.html
|
||||
│ ├── _shortcodes
|
||||
│ │ └── myshortcode.html
|
||||
│ └── api
|
||||
│ ├── mylayout.html
|
||||
│ ├── single.html
|
||||
│ └── _markup
|
||||
│ └── render-link.html
|
||||
│ ├── baseof.html
|
||||
│ ├── _shortcodes
|
||||
│ │ └── myshortcode.html
|
||||
│ └── api
|
||||
│ ├── mylayout.html
|
||||
│ ├── page.html
|
||||
│ └── _markup
|
||||
│ └── render-link.html
|
||||
└── tags
|
||||
├── taxonomy.html
|
||||
├── term.html
|
||||
@@ -97,4 +97,3 @@ layouts
|
||||
|
||||
[^type]: The `type` set in front matter will effectively replace the `section` folder in [Page path] when doing lookups.
|
||||
[^internal]: The old way of doing it made it very hard/impossible to, e.g., override `_internal/disqus.html` in a theme. Now you can just create a partial with the same name.
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@ To paginate a list page using the `Paginate` method:
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
In the example above, we:
|
||||
@@ -81,7 +81,7 @@ To paginate a list page using the `Paginator` method:
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
In the example above, we:
|
||||
@@ -114,7 +114,7 @@ Use pagination with any of the [grouping methods]. For example:
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
## Navigation
|
||||
@@ -122,23 +122,23 @@ Use pagination with any of the [grouping methods]. For example:
|
||||
As shown in the examples above, the easiest way to add navigation between pagers is with Hugo's embedded pagination template:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
The embedded pagination template has two formats: `default` and `terse`. The above is equivalent to:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/pagination.html" (dict "page" . "format" "default") }}
|
||||
{{ partial "pagination.html" (dict "page" . "format" "default") }}
|
||||
```
|
||||
|
||||
The `terse` format has fewer controls and page slots, consuming less space when styled as a horizontal list. To use the `terse` format:
|
||||
|
||||
```go-html-template
|
||||
{{ template "_internal/pagination.html" (dict "page" . "format" "terse") }}
|
||||
{{ partial "pagination.html" (dict "page" . "format" "terse") }}
|
||||
```
|
||||
|
||||
> [!note]
|
||||
> To override Hugo's embedded pagination template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
|
||||
> To override Hugo's embedded pagination template, copy the [source code] to a file with the same name in the `layouts/_partials` directory, then call it from your templates using the [`partial`] function:
|
||||
>
|
||||
> `{{ partial "pagination.html" . }}`
|
||||
|
||||
@@ -179,7 +179,7 @@ And this section template:
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
{{ partial "pagination.html" . }}
|
||||
```
|
||||
|
||||
The published site has this structure:
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
---
|
||||
title: Partial templates
|
||||
description: Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY.
|
||||
categories: []
|
||||
keywords: []
|
||||
weight: 100
|
||||
aliases: [/templates/partials/,/layout/chrome/]
|
||||
---
|
||||
|
||||
{{< youtube pjS4pOLyB7c >}}
|
||||
|
||||
## 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:
|
||||
|
||||
```txt
|
||||
layouts/
|
||||
└── partials/
|
||||
├── footer/
|
||||
│ ├── scripts.html
|
||||
│ └── site-footer.html
|
||||
├── head/
|
||||
│ ├── favicons.html
|
||||
│ ├── metadata.html
|
||||
│ └── prerender.html
|
||||
└── header/
|
||||
├── site-header.html
|
||||
└── site-nav.html
|
||||
```
|
||||
|
||||
All partials are called within your templates using the following pattern:
|
||||
|
||||
```go-html-template
|
||||
{{ 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](/templates/introduction/#context).
|
||||
|
||||
> [!note]
|
||||
> Do not include the word "baseof" when naming partial templates. The word "baseof" is reserved for base templates.
|
||||
|
||||
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:
|
||||
|
||||
```go-html-template
|
||||
{{ 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 dot (`.`), which tells the template receiving the partial to apply the current [context][context].
|
||||
|
||||
This means the partial will *only* be able to access those variables. The partial is isolated and cannot access 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
|
||||
|
||||
```go-html-template
|
||||
{{/* layouts/partials/GetFeatured.html */}}
|
||||
{{ return first . (where site.RegularPages "Params.featured" true) }}
|
||||
```
|
||||
|
||||
```go-html-template
|
||||
{{/* layouts/index.html */}}
|
||||
{{ range partial "GetFeatured.html" 5 }}
|
||||
[...]
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
### Example GetImage
|
||||
|
||||
```go-html-template
|
||||
{{/* layouts/partials/GetImage.html */}}
|
||||
{{ $image := false }}
|
||||
{{ with .Params.gallery }}
|
||||
{{ $image = index . 0 }}
|
||||
{{ end }}
|
||||
{{ with .Params.image }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ return $image }}
|
||||
```
|
||||
|
||||
```go-html-template
|
||||
{{/* layouts/_default/single.html */}}
|
||||
{{ with partial "GetImage.html" . }}
|
||||
[...]
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
> [!note]
|
||||
> Only one `return` statement is allowed per partial file.
|
||||
|
||||
## 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.
|
||||
|
||||
```go-html-template
|
||||
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][partialcached].
|
||||
|
||||
## Examples
|
||||
|
||||
### `header.html`
|
||||
|
||||
The following `header.html` partial template is used for [spf13.com](https://spf13.com/):
|
||||
|
||||
```go-html-template {file="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>
|
||||
```
|
||||
|
||||
> [!note]
|
||||
> The `header.html` example partial was built before the introduction of block templates to Hugo. Read more on [base templates and blocks](/templates/base/) 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.
|
||||
|
||||
### `footer.html`
|
||||
|
||||
The following `footer.html` partial template is used for [spf13.com](https://spf13.com/):
|
||||
|
||||
```go-html-template {file="layouts/partials/footer.html"}
|
||||
<footer>
|
||||
<div>
|
||||
<p>
|
||||
© 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>
|
||||
```
|
||||
|
||||
[context]: /templates/introduction/
|
||||
[partialcached]: /functions/partials/includecached/
|
||||
@@ -60,20 +60,16 @@ Hugo will render this to:
|
||||
|
||||
## Custom templates
|
||||
|
||||
Override Hugo's [embedded RSS template] by creating one or more of your own, following the naming conventions as shown in the [template lookup order].
|
||||
|
||||
For example, to use different templates for home, section, taxonomy, and term pages:
|
||||
Override Hugo's [embedded RSS template] by creating one or more of your own. For example, to use different templates for home, section, taxonomy, and term pages:
|
||||
|
||||
```text
|
||||
layouts/
|
||||
└── _default/
|
||||
├── home.rss.xml
|
||||
├── section.rss.xml
|
||||
├── taxonomy.rss.xml
|
||||
└── term.rss.xml
|
||||
├── home.rss.xml
|
||||
├── section.rss.xml
|
||||
├── taxonomy.rss.xml
|
||||
└── term.rss.xml
|
||||
```
|
||||
|
||||
RSS templates receive the `.Page` and `.Site` objects in context.
|
||||
|
||||
[embedded RSS template]: {{% eturl rss %}}
|
||||
[template lookup order]: /templates/lookup-order/#rss-templates
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user