Get Hugo to Show Content from Multiple Sections

Our site remains ad-free thanks to our affiliates. This post's featured affiliate is NordVPN. Online VPN service that encrypts your internet traffic and hides your IP with physical location. Upgrade your privacy and security now.

The post is not sponsored by the above affiliate and the content here is not representative of their company.

In this tutorial, you will learn how to grab pages from multiple sections on your Hugo site and display them in a single list. There are many reasons why this may be used. For instance, if you have a section called “tutorial” and another section called “news”, you may want to combine both sections together on your homepage to display all of the recent combined posts.

There are a few ways to go about displaying multiple sections in a single list in Hugo, but I will go over the two that I use frequently. Depending on your current website structure, you may need to make additional changes for the changes to work properly.

Using Front Matter “Type” Variable

There is an optional variable you can set in your front matter called type. The variable will set the type of the content. When the variable isn’t specified, the value is determined by the directory the content is in. What this allows, is you to have content created in a folder but specify a different type for the content.

This method works by setting the type of all content in the sections you want to combine into a single list to the same value. In addition to having the content combined, the type variable can also save you time when creating templates if multiple sections are rendered similarly. There is a downfall to using the type variable though; your template may no longer work as expected because you are changing what files are used to render those modified pages.

The first step is to modify the front matter. Open up all of the pages from the sections you want to combine and add the variable type to the front matter. Below is the TOML example of what it may look like.

title = "Sample Post"
draft = false
type = "article"

After adding the type to all the files, you need to add a range loop that selects pages based on the type of content. Depending on your current page context and desired result, the variable .Data.Pages may need to be replaced with .Site.Pages or .Site.RegularPages.

{{ range first 5 (where .Data.Pages "Type" "article") }}
	{{ .Title }}
{{ end }}

Using Where, Section, In, and Slice

The easier method to implement that doesn’t modify your existing content and layouts is to simply use a where statement. For this example, let us assume we have content in the sections “tutorial” and “news” that we want to show in a single list.

This works by having the where function look for pages that match the “Section” we want. Instead of simply matching by equaling a single value, we instead have it check if the value is inside of a slice (array).

{{ range first 5 (where .Data.Pages "Section" "in" (slice "tutorial" "news")) }}
	{{ .Title }}
{{ end }}

It may seem like the second method where you select content using “in and slice” is easier and the best solution. This isn’t always the case though. For instance, when using the “in and slice” method, you have to remember to update all the locations where you implement this feature if you were to ever want to add a new section to the combined lists. Additionally, when using type in the front matter, you can have a single template file handle both sections rendering instead of having to create two similar pages in the case that both sections are rendered similarly.

Related Posts

Build Script for Hugo Websites

A basic bash build script for Hugo websites to compress images, JavaScript files, and CSS before releasing your website to the public. Keeps a copy of uncompressed assets while easily compressing all files before uploading your website.

Writing GUIs in Golang

Explore the different methods to create a GUI using Golang and what method will work best for your application.

Hugo Footnotes and Citations

Add footnotes, citations, and references to your Hugo posts with this simple technique. Give your articles more credibility and improve your posts by making them more informative.

USB Sniffing and Programming

Learn how to sniff USB data and write programs to use custom USB devices. Using Wireshark and LibUSB you can fairly quickly learn how USB devices work and interact with them.