VoteIT

  • News
  • Documentation
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • Single Page Template Lookup Order
  • Example Single Page Templates
    • posts/single.html
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 .Params.topics }}
    <ul id="topics">
      {{ range . }}
        <li><a href="{{ "topics" | absURL}}{{ . | urlize }}">{{ . }}</a> </li>
      {{ end }}
    </ul>
    {{ end }}
    {{ with .Params.tags }}
    <ul id="tags">
      {{ range . }}
        <li> <a href="{{ "tags" | absURL }}{{ . | urlize }}">{{ . }}</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>
{{ 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
  • Hugo's Lookup Order
  • RSS Templates
  • Section Page Templates
  • Sitemap Template
  • About VoteIT
    • Overview
    • Hugo and GDPR
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • VoteIT Modules
  • Content Management
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
“Single Page Templates” was last updated: October 24, 2019: remake. (28623dd)
Improve this page
By the VoteIT Authors
VoteIT Logo
  • File an Issue
  • @VoteIT
  • @robin_betahaus
  • @andershultman
 
 

VoteIT Sponsors

Logo for VoteIT
Logo for Betahaus
Logo for Datatrion AB
 

The VoteIT logos are copyright © VoteIT 2011–2019.

  • News
  • Documentation
  • Themes
  • Showcase
  • Community
  • GitHub
  • About VoteIT
  • Getting Started
  • VoteIT Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute