Hugo Section vs Type

Sep 8, 2017
Usage for Archetype, Templates and Layouts.

Section

All Hugo posts are stored in content directory. When a directory is created within content directory, a section is created.

In the following example, two section are created: tutorials and news.

content/tutorials/post-01.md
content/tutorials/post-02.md
content/news/post-01.md

Section in Template

Query pages or pagniation based on section.

{{ $pages := (where .Site.Pages "Section" "tutorials") }}

{{ $paginator := .Paginate (where .Site.Pages "Section" "tutorials") }}

Retrieve page's section.

{{ .Section }}

Archetype

Archetypes define the default configurations for each newly created post.

Example of tutorials archetypes at archetypes/tutorials.md.

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
description:
date: {{ .Date }}
tags: ["test"]
weight: 1000
draft: true
---

Whenever you create a new post with a matched content section, Hugo will match it with archetypes.

# will utilize archetypes/tutorials.mdhugo new tutorials/post-01.md# since archetypes/news.md is not defined, will utilize archetypes/default.mdhugo new news/post-01.md

Type

By default, a post will have the same section and type. A post created in the tutorials directory will be of tutorials section and tutorials type.

By default, everything created within a section will use the content type that matches the section name.

You can change the type by editing the markdown post with the following configuration.

+++
title: "Hugo Section vs Type"
date: 2017-09-08T19:12:24+08:00
type = "snippets"
+++

Type in Template

Query pages or pagniation based on type.

{{ $pages := (where .Site.Pages "Type" "snippets") }}

{{ $paginator := .Paginate (where .Site.Pages "Type" "snippets") }}

Retrieve page's type.

{{ .Type }}

Layouts

Assuming you created a post in content/tutorials/post-01.md, thus it shall be of tutorials section and tutorials type.

By default, the post's layout shall be of layouts/_default/single.html.

If you created a new layout at layouts/tutorials/single.html, this layout shall be used instead.

If you change the type to snippets, layouts/tutorials/single.html shall not be used. You can create a new layout for type snippets at layouts/snippets/single.html.

If you want to create a custom layout for type snippets, you can edit the post's configuration.

+++
title: "Hugo Section vs Type"
date: 2017-09-08T19:12:24+08:00
type = "snippets"
layout = "special"
+++

The above configuration will use this layout file: layouts/snippets/special.html

References

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.