base.md (3678B)
1 ---
2 title: Base Templates and Blocks
3 linktitle:
4 description: The base and block constructs allow you to define the outer shell of your master templates (i.e., the chrome of the page).
5 date: 2017-02-01
6 publishdate: 2017-02-01
7 lastmod: 2017-02-01
8 categories: [templates,fundamentals]
9 keywords: [blocks,base]
10 menu:
11 docs:
12 parent: "templates"
13 weight: 20
14 weight: 20
15 sections_weight: 20
16 draft: false
17 aliases: [/templates/blocks/,/templates/base-templates-and-blocks/]
18 toc: true
19 ---
20
21 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.
22
23 {{< youtube QVOMCYitLEc >}}
24
25 ## Base Template Lookup Order
26
27 {{< 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`).
28
29 See [Template Lookup Order](/templates/lookup-order/) for details and examples.
30
31 ## Define the Base Template
32
33 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.
34
35 {{< code file="layouts/_default/baseof.html" download="baseof.html" >}}
36 <!DOCTYPE html>
37 <html>
38 <head>
39 <meta charset="utf-8">
40 <title>{{ block "title" . }}
41 <!-- Blocks may include default content. -->
42 {{ .Site.Title }}
43 {{ end }}</title>
44 </head>
45 <body>
46 <!-- Code that all your templates share, like a header -->
47 {{ block "main" . }}
48 <!-- The part of the page that begins to differ between templates -->
49 {{ end }}
50 {{ block "footer" . }}
51 <!-- More shared code, perhaps a footer but that can be overridden if need be in -->
52 {{ end }}
53 </body>
54 </html>
55 {{< /code >}}
56
57 ## Override the Base Template
58
59 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:
60
61 {{< code file="layouts/_default/list.html" download="list.html" >}}
62 {{ define "main" }}
63 <h1>Posts</h1>
64 {{ range .Pages }}
65 <article>
66 <h2>{{ .Title }}</h2>
67 {{ .Content }}
68 </article>
69 {{ end }}
70 {{ end }}
71 {{< /code >}}
72
73 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.
74
75 {{% warning %}}
76 Code that you put outside the block definitions *can* break your layout. This even includes HTML comments. For example:
77
78 ```
79 <!-- Seemingly harmless HTML comment..that will break your layout at build -->
80 {{ define "main" }}
81 ...your code here
82 {{ end }}
83 ```
84 [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)
85 {{% /warning %}}
86
87 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]:
88
89 {{< code file="layouts/_default/single.html" download="single.html" >}}
90 {{ define "title" }}
91 <!-- This will override the default value set in baseof.html; i.e., "{{.Site.Title}}" in the original example-->
92 {{ .Title }} – {{ .Site.Title }}
93 {{ end }}
94 {{ define "main" }}
95 <h1>{{ .Title }}</h1>
96 {{ .Content }}
97 {{ end }}
98 {{< /code >}}
99
100 [hugolists]: /templates/lists
101 [lookup]: /templates/lookup-order/
102 [rendering the section]: /templates/section-templates/
103 [singletemplate]: /templates/single-page-templates/