Template lookup order
Lookup rules
Hugo takes the parameters listed below into consideration when choosing a template for a given page. The templates are ordered by specificity. This should feel natural, but look at the table below for concrete examples of the different parameter variations.
- Kind
- The page
Kind
(the home page is one). See the example tables below per kind. This also determines if it is a single page (i.e. a regular content page. We then look for a template in_default/single.html
for HTML) or a list page (section listings, home page, taxonomy lists, taxonomy terms. We then look for a template in_default/list.html
for HTML). - Layout
- Can be set in front matter.
- Output Format
- See Custom Output Formats. An output format has both a
name
(e.g.rss
,amp
,html
) and asuffix
(e.g.xml
,html
). We prefer matches with both (e.g.index.amp.html
), but look for less specific templates.
Note that if the output format’s Media Type has more than one suffix defined, only the first is considered.
- Language
- We will consider a language tag in the template name. If the site language is
fr
,index.fr.amp.html
will win overindex.amp.html
, butindex.amp.html
will be chosen beforeindex.fr.html
. - Type
- Is value of
type
if set in front matter, else it is the name of the root section (e.g. “blog”). It will always have a value, so if not set, the value is “page”. - Section
- Is relevant for
section
,taxonomy
andterm
types.
Target a template
You cannot change the lookup order to target a content page, but you can change a content page to target a template. Specify type
, layout
, or both in front matter.
Consider this content structure:
content/
├── about.md
└── contact.md
Files in the root of the content directory have a content type of page
. To render these pages with a unique template, create a matching subdirectory:
layouts/
└── page/
└── single.html
But the contact page probably has a form and requires a different template. In the front matter specify layout
:
layout: contact
title: Contact
layout = 'contact'
title = 'Contact'
{
"layout": "contact",
"title": "Contact"
}
Then create the template for the contact page:
layouts/
└── page/
└── contact.html <-- renders contact.md
└── single.html <-- renders about.md
As a content type, the word page
is vague. Perhaps miscellaneous
would be better. Add type
to the front matter of each page:
title: About
type: miscellaneous
title = 'About'
type = 'miscellaneous'
{
"title": "About",
"type": "miscellaneous"
}
layout: contact
title: Contact
type: miscellaneous
layout = 'contact'
title = 'Contact'
type = 'miscellaneous'
{
"layout": "contact",
"title": "Contact",
"type": "miscellaneous"
}
Now place the layouts in the corresponding directory:
layouts/
└── miscellaneous/
└── contact.html <-- renders contact.md
└── single.html <-- renders about.md
Home page
Example | OutputFormat | Suffix | Template Lookup Order |
---|---|---|---|
Home page | html | html |
|
Base template for home page | html | html |
|
Home page with type set to "demotype" | html | html |
|
Base template for home page with type set to "demotype" | html | html |
|
Home page with layout set to "demolayout" | html | html |
|
AMP home, French language | amp | html |
|
JSON home | json | json |
|
RSS home | rss | xml |
|
Single pages
Example | OutputFormat | Suffix | Template Lookup Order |
---|---|---|---|
Single page in "posts" section | html | html |
|
Base template for single page in "posts" section | html | html |
|
Single page in "posts" section with layout set to "demolayout" | html | html |
|
Base template for single page in "posts" section with layout set to "demolayout" | html | html |
|
AMP single page | amp | html |
|
AMP single page, French language | html | html |
|
Section pages
A section page is a list of pages within a given section.
Example | OutputFormat | Suffix | Template Lookup Order |
---|---|---|---|
Section list for "posts" | html | html |
|
Section list for "posts" with type set to "blog" | html | html |
|
Section list for "posts" with layout set to "demolayout" | html | html |
|
Section list for "posts" | rss | xml |
|
Taxonomy pages
A taxonomy page is a list of terms within a given taxonomy. The examples below assume the following site configuration:
taxonomies:
category: categories
[taxonomies]
category = 'categories'
{
"taxonomies": {
"category": "categories"
}
}
Example | OutputFormat | Suffix | Template Lookup Order |
---|---|---|---|
Taxonomy list for "categories" | html | html |
|
Taxonomy list for "categories" | rss | xml |
|
Term pages
A term page is a list of pages associated with a given term. The examples below assume the following site configuration:
taxonomies:
category: categories
[taxonomies]
category = 'categories'
{
"taxonomies": {
"category": "categories"
}
}
Example | OutputFormat | Suffix | Template Lookup Order |
---|---|---|---|
Term list for "categories" | html | html |
|
Term list for "categories" | rss | xml |
|