HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
gohugoio Star
  • About Hugo
    • Overview
    • What is Hugo
    • Hugo features
    • Static site generators
    • Hugo's security model
    • Hugo and the GDPR
    • License
  • Installation
    • Overview
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting started
    • Overview
    • Quick start
    • Basic usage
    • Directory structure
    • Configuration
    • Configure markup
    • Glossary of terms
    • External learning resources
  • Quick reference
    • Overview
    • Emojis
    • Functions
    • Methods
    • Page collections
  • Content management
    • Overview
    • Organization
    • Page bundles
    • Content formats
    • Front matter
    • Build options
    • Page resources
    • Image processing
    • Shortcodes
    • Related content
    • Sections
    • Content types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and cross references
    • URL management
    • Menus
    • Static files
    • Table of contents
    • Comments
    • Multilingual
    • Markdown attributes
    • Syntax highlighting
    • Diagrams
    • Mathematics
  • Templates
    • Overview
    • Templating
    • Template lookup order
    • Base templates and blocks
    • Single page templates
    • List templates
    • Homepage template
    • Section templates
    • Taxonomy templates
    • Pagination
    • Content view templates
    • Partial templates
    • Shortcode templates
    • Menu templates
    • Data templates
    • RSS templates
    • Sitemap templates
    • Internal templates
    • Custom output formats
    • 404 page
    • Robots.txt
  • Functions
    • Overview
    • cast
    • collections
    • compare
    • crypto
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • Methods
    • Overview
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • Render hooks
    • Overview
    • Introduction
    • Code blocks
    • Headings
    • Images
    • Links
  • Hugo Modules
    • Overview
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo Pipes
    • Overview
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • Troubleshooting
    • Overview
    • Audit
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • Developer tools
    • Overview
    • Editor plugins
    • Front-ends
    • Search
    • Migrations
    • Other projects
  • Hosting and deployment
    • Overview
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • Contribute
    • Overview
    • Development
    • Documentation
    • Themes
  • Maintenance
TEMPLATES

Single page templates

The primary view of content in Hugo is the single view. Hugo will render every Markdown file provided with a corresponding single template.

Single page template lookup order

See Template Lookup.

Example single page templates

Content pages are of the type page and will therefore have all the page variables and site variables available to use in their templates.

posts/single.html

This single page template makes use of Hugo base templates, the .Format function for dates, the .WordCount page variable, and ranges through the single content’s specific taxonomies. with is also used to check whether the taxonomies are set in the front matter.

layouts/posts/single.html
{{ define "main" }}
  <section id="main">
    <h1 id="title">{{ .Title }}</h1>
    <div>
      <article id="content">
        {{ .Content }}
      </article>
    </div>
  </section>
  <aside id="meta">
    <div>
      <section>
        <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
        <h5 id="wordcount"> {{ .WordCount }} Words</h5>
      </section>
      {{ 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="{{ .RelPermalink }}"> {{ .LinkTitle }}</a>
      {{ end }}
      {{ with .NextInSection }}
        <a class="next" href="{{ .RelPermalink }}"> {{ .LinkTitle }}</a>
      {{ end }}
    </div>
  </aside>
{{ end }}

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.

See also

  • Create your own shortcodes
  • Page bundles
  • RSS templates
  • Section page templates
  • Sitemap templates

On this page

  • Single page template lookup order
  • Example single page templates
Last updated: February 3, 2024: Replace links to variable pages with links to method pages (126c323d)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo Sponsors

 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Installation
  • Getting started
  • Quick reference
  • Content management
  • Templates
  • Functions
  • Methods
  • Render hooks
  • Hugo Modules
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Developer tools
  • Hosting and deployment
  • Contribute
  • Maintenance