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 |
|