2019-10-21 04:22:28 -04:00
---
2023-07-29 05:15:54 -04:00
title: Single page templates
2019-10-21 04:22:28 -04:00
description: The primary view of content in Hugo is the single view. Hugo will render every Markdown file provided with a corresponding single template.
categories: [templates]
2023-01-17 06:51:01 -05:00
keywords: [page, templates]
2019-10-21 04:22:28 -04:00
menu:
docs:
2023-05-22 10:43:12 -04:00
parent: templates
2023-07-29 05:15:54 -04:00
weight: 50
weight: 50
2019-10-21 04:22:28 -04:00
aliases: [/layout/content/]
toc: true
---
2023-07-29 05:15:54 -04:00
## Single page template lookup order
2019-10-21 04:22:28 -04:00
See [Template Lookup ](/templates/lookup-order/ ).
2023-07-29 05:15:54 -04:00
## Example single page templates
2019-10-21 04:22:28 -04:00
2022-12-20 05:04:41 -05:00
Content pages are of the type `page` and will therefore have all the [page variables][pagevars] and [site variables] available to use in their templates.
2019-10-21 04:22:28 -04:00
### `posts/single.html`
2022-12-20 05:04:41 -05:00
This single page template makes use of Hugo [base templates], the [`.Format` function] for dates, the [`.WordCount` page variable][pagevars], and ranges through the single content's specific [taxonomies][pagetaxonomy]. [`with`] is also used to check whether the taxonomies are set in the front matter.
2019-10-21 04:22:28 -04:00
2023-05-22 10:43:12 -04:00
{{< code file = "layouts/posts/single.html" > }}
2019-10-21 04:22:28 -04:00
{{ define "main" }}
2023-07-29 05:15:54 -04:00
< section id = "main" >
< h1 id = "title" > {{ .Title }}< / h1 >
< div >
< article id = "content" >
{{ .Content }}
< / article >
< / div >
2023-05-22 10:43:12 -04:00
< / section >
2023-07-29 05:15:54 -04:00
< aside id = "meta" >
< div >
2023-08-07 04:35:12 -04:00
< section >
< h4 id = "date" > {{ .Date.Format "Mon Jan 2, 2006" }} < / h4 >
< h5 id = "wordcount" > {{ .WordCount }} Words < / h5 >
< / section >
2023-07-29 05:15:54 -04:00
{{ with .GetTerms "topics" }}
< ul id = "topics" >
{{ range . }}
< li > < a href = "{{ .RelPermalink }}" > {{ .LinkTitle }}< / a > < / li >
{{ end }}
< / ul >
{{ end }}
{{ with .GetTerms "tags" }}
< ul id = "tags" >
{{ range . }}
< li > < a href = "{{ .RelPermalink }}" > {{ .LinkTitle }}< / a > < / li >
{{ end }}
< / ul >
{{ end }}
< / div >
< div >
{{ with .PrevInSection }}
< a class = "previous" href = "{{ .Permalink }}" > {{ .Title }}< / a >
{{ end }}
{{ with .NextInSection }}
< a class = "next" href = "{{ .Permalink }}" > {{ .Title }}< / a >
{{ end }}
< / div >
< / aside >
2019-10-21 04:22:28 -04:00
{{ end }}
{{< / code > }}
To easily generate new instances of a content type (e.g., new `.md` files in a section like `project/` ) with preconfigured front matter, use [content archetypes][archetypes].
[archetypes]: /content-management/archetypes/
[base templates]: /templates/base/
[content type]: /content-management/types/
[directory structure]: /getting-started/directory-structure/
[dry]: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
2023-01-17 06:51:01 -05:00
[`.format` function]: /functions/format/
2019-10-21 04:22:28 -04:00
[front matter]: /content-management/front-matter/
2023-07-29 05:15:54 -04:00
[pagetaxonomy]: /templates/taxonomy-templates/#list-terms-assigned-to-a-page
2019-10-21 04:22:28 -04:00
[pagevars]: /variables/page/
[partials]: /templates/partials/
[section]: /content-management/sections/
[site variables]: /variables/site/
[spf13]: https://spf13.com/
2023-10-20 03:42:39 -04:00
[`with`]: /functions/go-template/with/