single-page-templates.md (3005B)
1 ---
2 title: Single Page Templates
3 linktitle:
4 description: The primary view of content in Hugo is the single view. Hugo will render every Markdown file provided with a corresponding single template.
5 date: 2017-02-01
6 publishdate: 2017-02-01
7 lastmod: 2017-04-06
8 categories: [templates]
9 keywords: [page,templates]
10 menu:
11 docs:
12 parent: "templates"
13 weight: 60
14 weight: 60
15 sections_weight: 60
16 draft: false
17 aliases: [/layout/content/]
18 toc: true
19 ---
20
21 ## Single Page Template Lookup Order
22
23 See [Template Lookup](/templates/lookup-order/).
24
25 ## Example Single Page Templates
26
27 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.
28
29 ### `posts/single.html`
30
31 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.
32
33 {{< code file="layouts/posts/single.html" download="single.html" >}}
34 {{ define "main" }}
35 <section id="main">
36 <h1 id="title">{{ .Title }}</h1>
37 <div>
38 <article id="content">
39 {{ .Content }}
40 </article>
41 </div>
42 </section>
43 <aside id="meta">
44 <div>
45 <section>
46 <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
47 <h5 id="wordcount"> {{ .WordCount }} Words </h5>
48 </section>
49 {{ with .Params.topics }}
50 <ul id="topics">
51 {{ range . }}
52 <li><a href="{{ "topics" | absURL}}{{ . | urlize }}">{{ . }}</a> </li>
53 {{ end }}
54 </ul>
55 {{ end }}
56 {{ with .Params.tags }}
57 <ul id="tags">
58 {{ range . }}
59 <li> <a href="{{ "tags" | absURL }}{{ . | urlize }}">{{ . }}</a> </li>
60 {{ end }}
61 </ul>
62 {{ end }}
63 </div>
64 <div>
65 {{ with .PrevInSection }}
66 <a class="previous" href="{{.Permalink}}"> {{.Title}}</a>
67 {{ end }}
68 {{ with .NextInSection }}
69 <a class="next" href="{{.Permalink}}"> {{.Title}}</a>
70 {{ end }}
71 </div>
72 </aside>
73 {{ end }}
74 {{< /code >}}
75
76 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].
77
78 [archetypes]: /content-management/archetypes/
79 [base templates]: /templates/base/
80 [config]: /getting-started/configuration/
81 [content type]: /content-management/types/
82 [directory structure]: /getting-started/directory-structure/
83 [dry]: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
84 [`.Format` function]: /functions/format/
85 [front matter]: /content-management/front-matter/
86 [pagetaxonomy]: /templates/taxonomy-templates/#display-a-single-piece-of-contents-taxonomies
87 [pagevars]: /variables/page/
88 [partials]: /templates/partials/
89 [section]: /content-management/sections/
90 [site variables]: /variables/site/
91 [spf13]: https://spf13.com/
92 [`with`]: /functions/with/