Get Hugo to Show Content from Multiple Sections

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.