HUGO Docs

  • News
  • About
    • In this section
    • Introduction
    • Features
    • Privacy
    • Security
    • License
  • Installation
    • In this section
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting started
    • In this section
    • Quick start
    • Basic usage
    • Directory structure
    • Configuration
    • Configure markup
    • Glossary of terms
    • External learning resources
  • Quick reference
    • In this section
    • Emojis
    • Functions
    • Methods
    • Page collections
  • Content management
    • In this section
    • 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
    • Comments
    • Multilingual
    • Markdown attributes
    • Syntax highlighting
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • Templates
    • In this section
    • Introduction
    • Template types
    • Lookup order
    • Base templates
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • Partial templates
    • Content view templates
    • Shortcode templates
    • Sitemap templates
    • RSS templates
    • 404 templates
    • robots.txt templates
    • Menus
    • Pagination
    • Embedded templates
    • Custom output formats
  • Functions
    • In this section
    • cast
    • collections
    • compare
    • crypto
    • css
    • 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
    • In this section
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • Render hooks
    • In this section
    • Introduction
    • Code blocks
    • Headings
    • Images
    • Links
  • Hugo Modules
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo Pipes
    • In this section
    • 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
    • In this section
    • Audit
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • Developer tools
    • In this section
    • Editor plugins
    • Front-ends
    • Search
    • Migrations
    • Other projects
  • Hosting and deployment
    • In this section
    • 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
    • In this section
    • Development
    • Documentation
    • Themes
  • Maintenance
TEMPLATES

Section templates

Use section templates to list members of a section.

Add content and front matter to section templates

To effectively leverage section templates, you should first understand Hugo’s content organization and, specifically, the purpose of _index.md for adding content and front matter to section and other list pages.

Section template lookup order

See Template Lookup.

Example: creating a default section template

layouts/_default/section.html
{{ define "main" }}
  <main>
    {{ .Content }}

    {{ $pages := where site.RegularPages "Type" "posts" }}
    {{ $paginator := .Paginate $pages }}

    {{ range $paginator.Pages }}
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ end }}

    {{ template "_internal/pagination.html" . }}
  </main>
{{ end }}

Example: using .Site.GetPage

The .Site.GetPage example that follows assumes the following project directory structure:

.
└── content
    ├── blog
    │   ├── _index.md   <-- title: My Hugo Blog
    │   ├── post-1.md
    │   ├── post-2.md
    │   └── post-3.md
    └── events
        ├── event-1.md
        └── event-2.md

.Site.GetPage will return nil if no _index.md page is found. Therefore, if content/blog/_index.md does not exist, the template will output the section name:

<h1>{{ with .Site.GetPage "/blog" }}{{ .Title }}{{ end }}</h1>

Since blog has a section index page with front matter at content/blog/_index.md, the above code will return the following result:

<h1>My Hugo Blog</h1>

If we try the same code with the events section, however, Hugo will default to the section title because there is no content/events/_index.md from which to pull content and front matter:

<h1>{{ with .Site.GetPage "/events" }}{{ .Title }}{{ end }}</h1>

Which then returns the following:

<h1>Events</h1>

On this page

  • Add content and front matter to section templates
  • Section template lookup order
  • Example: creating a default section template
Last updated: July 5, 2024: hugo doc (a0ca0ab)
Improve this page
 

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

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

  • News
  • About
  • 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