hugo/content/en/templates/base.md
Bjørn Erik Pedersen aa5ac36a3e Squashed 'docs/' changes from 327003421..39a7fac34
39a7fac34 Add .hugo_build.lock to .gitignore
920c716a4 fix a typo: to -> two (#1545)
6f0ba9593 Remove godocref from front matter (#1543)
8ec3d5948 remove link to wercker (#1544)
b56008719 Delete deployment-with-wercker.md (#1542)
e33d29b02 Fix broken links (#1538)
29e9d4c21 Sort commenting systems (#1541)
0b7ea60a7 Delete the news page "HTTP/2 Server Push in Hugo"
6e1515857 Fix quick-start.md (#1525)
62168ab35 Update comments.md (#1535)
d92191512 Small typo (#1539)
129c8834a Correct the PostCSS noMap default value (#1534)
6a5b29fcc Add example to index function (#1536)
e3dd8c507 Update output-formats.md
0c9321ca0 Remove reference to using LiveReload in production environment
4072d6776 Mod testing
09fabf7d6 Fix typo (#1524)
2fce813c8 Fix grammatical error in quick-start.md (#1523)
45230ab4a Hugo Mod testing
2dd4cd9e7 Update index.md
2c3ed62fd netlify: Bump to 0.88.1
648e2a007 Merge branch 'tempv0.88.1'
f216eade1 releaser: Add release notes to /docs for release of 0.88.1
8a7b64d4b Fix typographical errors in 0.88.0 release notes
a4bf86300 Release 0.88
738bb8f38 releaser: Add release notes to /docs for release of 0.88.0
8fcf2c55d highlight: Remove some pygments references
f2b173de2 HTTPS link
c88881c8e Adding link to nginx documentation
6b0a74fe0 Fix typos in docs (#1516)
498b8f0f1 Fix typos in time.Format (#1515)
28723fad6 Fix taxonomy and term examples (#1514)
3ffd00e12 Update front-matter.md
7cc1da82e Fix grammar in 0.86.1 release notes (#1510)
0009c51c3 Update docs helper
7e2f430f4 Update index.md
7857eae7e releaser: Add release notes to /docs for release of 0.87.0
1f08b684b releaser: Add release notes to /docs for release of 0.87.0
36a9e701c docs: Adjust config docs
0f588438e docs: Regen CLI docs
1b4682cd8 docs: Regen docs helper
bc8bbaae9 Merge commit 'bd77f6e1c99e04a476f0b1bb4e44569134e02399' into release-0.87.0
6f2480643 docs: Adjust time zone docs

git-subtree-dir: docs
git-subtree-split: 39a7fac343c289906db644c96079fdcc0298582f
2021-10-31 13:51:51 +01:00

103 lines
3.6 KiB
Markdown

---
title: Base Templates and Blocks
linktitle:
description: The base and block constructs allow you to define the outer shell of your master templates (i.e., the chrome of the page).
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-02-01
categories: [templates,fundamentals]
keywords: [blocks,base]
menu:
docs:
parent: "templates"
weight: 20
weight: 20
sections_weight: 20
draft: false
aliases: [/templates/blocks/,/templates/base-templates-and-blocks/]
toc: true
---
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
{{< new-in "0.63.0" >}} Since Hugo v0.63, 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.
{{< code file="layouts/_default/baseof.html" download="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>
{{< /code >}}
## Override the Base Template
From the above base template, you can define a [default list template][hugolists]. The default list template will inherit all of the code defined above and can then implement its own `"main"` block from:
{{< code file="layouts/_default/list.html" download="list.html" >}}
{{ define "main" }}
<h1>Posts</h1>
{{ range .Pages }}
<article>
<h2>{{ .Title }}</h2>
{{ .Content }}
</article>
{{ end }}
{{ end }}
{{< /code >}}
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 %}}
Code that you put outside the block definitions *can* break your layout. This even includes HTML comments. For example:
```
<!-- Seemingly harmless HTML comment..that will break your layout at build -->
{{ define "main" }}
...your code here
{{ end }}
```
[See this thread from the Hugo discussion forums.](https://discourse.gohugo.io/t/baseof-html-block-templates-and-list-types-results-in-empty-pages/5612/6)
{{% /warning %}}
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 page template][singletemplate]:
{{< code file="layouts/_default/single.html" download="single.html" >}}
{{ define "title" }}
<!-- This will override the default value set in baseof.html; i.e., "{{.Site.Title}}" in the original example-->
{{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}
{{< /code >}}
[hugolists]: /templates/lists
[lookup]: /templates/lookup-order/
[rendering the section]: /templates/section-templates/
[singletemplate]: /templates/single-page-templates/