Displaying Related Content

When people find a page on your site through a social media share or a search result, you might want to make some of your other content visible as well. Hugo lets you display related content and has some sensible defaults for doing so. To enable this feature, you have to add some keywords to your pages’ front matter section. You also have to add some code to your single page template that displays the related content. To demonstrate, let’s add a keywords section to the front matter of the Jabberwocky project and the second-post blog post.

First, open content/projects/jabberwocky.md and add the keywords section. Like tags, it’s a list:

Add the same keywords section to content/posts/second-post.md:

Then, open themes/basic/layouts/posts/single.html and add this code below your post but above the comments section:

This code uses a with block to check if there’s any related content. If there is, it displays the header and the list of content.

By adding the same keyword to the Jabberwocky project and the “second post” blog post, the Jabberwocky project now shows up as a related piece of content as shown in the screenshot.

This is a great way to make people aware of your work. Add keywords throughout your pages to get them to show up on your blog posts.

Hugo uses these default settings for related content, creating indices on the keywords and dates of your content:

To change the behavior of related content, you must add the entire configuration block to your config.toml file and then modify it to suit your needs.

There are a few options you might want to explore when setting up the related post content. For example, the includeNewer option, if set to true, will update older pages on your site with new related content. The threshold is a number between 0 and 100, with lower numbers showing more content with less relevance. Also, the toLower option can increase the matches by lowercasing the keywords and queries that get created for finding related content.

You can also add new indices for tags, author, or any other front matter fields for that matter. The weight for each index you create controls how relevant this index is compared to others. Experiment with these values to get the right balance for your content.