base.md (4968B)
1 ---
2 title: Base 模板 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: 2018-08-11
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 The [lookup order][lookup] for base templates is as follows:
28
29 1. `/layouts/section/<TYPE>-baseof.html`
30 2. `/themes/<THEME>/layouts/section/<TYPE>-baseof.html`
31 3. `/layouts/<TYPE>/baseof.html`
32 4. `/themes/<THEME>/layouts/<TYPE>/baseof.html`
33 5. `/layouts/section/baseof.html`
34 6. `/themes/<THEME>/layouts/section/baseof.html`
35 7. `/layouts/_default/<TYPE>-baseof.html`
36 8. `/themes/<THEME>/layouts/_default/<TYPE>-baseof.html`
37 9. `/layouts/_default/baseof.html`
38 10. `/themes/<THEME>/layouts/_default/baseof.html`
39
40 Variables are denoted by capitalized text set within `<>`. Note that Hugo's default behavior is for `type` to inherit from `section` unless otherwise specified.
41
42 ### Example Base Template Lookup Order
43
44 As an example, let's assume your site is using a theme called "mytheme" when rendering the section list for a `posts` section. Hugo picks `layout/section/posts.html` as the template for [rendering the section][]. The `{{define}}` block in this template tells Hugo that the template is an extension of a base template.
45
46 Here is the lookup order for the `posts` base template:
47
48 1. `/layouts/section/posts-baseof.html`
49 2. `/themes/mytheme/layouts/section/posts-baseof.html`
50 3. `/layouts/posts/baseof.html`
51 4. `/themes/mytheme/layouts/posts/baseof.html`
52 5. `/layouts/section/baseof.html`
53 6. `/themes/mytheme/layouts/section/baseof.html`
54 7. `/layouts/_default/posts-baseof.html`
55 8. `/themes/mytheme/layouts/_default/posts-baseof.html`
56 9. `/layouts/_default/baseof.html`
57 10. `/themes/mytheme/layouts/_default/baseof.html`
58
59 ## Define the Base Template
60
61 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.
62
63 {{< code file="layouts/_default/baseof.html" download="baseof.html" >}}
64 <!DOCTYPE html>
65 <html>
66 <head>
67 <meta charset="utf-8">
68 <title>{{ block "title" . }}
69 <!-- Blocks may include default content. -->
70 {{ .Site.Title }}
71 {{ end }}</title>
72 </head>
73 <body>
74 <!-- Code that all your templates share, like a header -->
75 {{ block "main" . }}
76 <!-- The part of the page that begins to differ between templates -->
77 {{ end }}
78 {{ block "footer" . }}
79 <!-- More shared code, perhaps a footer but that can be overridden if need be in -->
80 {{ end }}
81 </body>
82 </html>
83 {{< /code >}}
84
85 ## Override the Base Template
86
87 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:
88
89 {{< code file="layouts/_default/list.html" download="list.html" >}}
90 {{ define "main" }}
91 <h1>Posts</h1>
92 {{ range .Pages }}
93 <article>
94 <h2>{{ .Title }}</h2>
95 {{ .Content }}
96 </article>
97 {{ end }}
98 {{ end }}
99 {{< /code >}}
100
101 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.
102
103 {{% warning %}}
104 Code that you put outside the block definitions *can* break your layout. This even includes HTML comments. For example:
105
106 ```
107 <!-- Seemingly harmless HTML comment..that will break your layout at build -->
108 {{ define "main" }}
109 ...your code here
110 {{ end }}
111 ```
112 [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)
113 {{% /warning %}}
114
115 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]:
116
117 {{< code file="layouts/_default/single.html" download="single.html" >}}
118 {{ define "title" }}
119 <!-- This will override the default value set in baseof.html; i.e., "{{.Site.Title}}" in the original example-->
120 {{ .Title }} – {{ .Site.Title }}
121 {{ end }}
122 {{ define "main" }}
123 <h1>{{ .Title }}</h1>
124 {{ .Content }}
125 {{ end }}
126 {{< /code >}}
127
128 [hugolists]: /templates/lists
129 [lookup]: /templates/lookup-order/
130 [rendering the section]: /templates/section-templates/
131 [singletemplate]: /templates/single-page-templates/