Written by Edd Turtle on makewithhugo.com
on

Show Related Posts in Hugo

Hugo is a great tool for blogging, creating quick and automated posts. As part of a blog, you will sometimes want to show related articles and posts to the one you’re reading. This is what this post sets out to achieve.

We can make this in Hugo easily if we are using it’s tags structure. With this in mind, you’ll need to be listing tags within your markdown for this to work.

Then all you have to do is use some code like below in your layout.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{{- range first 1 (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) -}}
    {{- $.Scratch.Set "has_related" true -}}
{{- end -}}

{{ if $.Scratch.Get "has_related" }}
    <div class="related-content">
        <h3>Related Posts</h3>
        <ul>
            {{- $num_to_show := .Site.Params.related_content_limit | default 3 -}}
            {{ range first $num_to_show (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
            <li>
                <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                &ndash; 
                <time datetime="{{ .Date.UTC.Format "2006-01-02T15:04:05-0700" }}">
                    {{ .Date.Format "Jan 2, 2006" }}
                </time>
                <br> 
                <small>{{ .Summary | plainify | htmlUnescape }}</small>
            </li>
          {{ end }}
        </ul>
    </div>
{{ end }}

It will match up pages based on common tags and will show the three most likely. You can change the number it shows on line 9 if required.

It also currently displays a title, the post’s date and it’s summary.

This should then end up looking like this:

preview of related posts in hugo

This code has been adapted from a comment on Hugo’s discourse.

#related #posts #tags #intersect #scratch #theme #blogging #articles #summary
Author Edd Turtle

Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Tweet me! Buy me a Coffee (Paypal)

Related Posts

  • Add Word Count & Estimated Reading Time to Posts –
    It’s all the trend these days to add “reading time” or a word count on your blog posts to indicate how big they are. We often add a word count as it’s super easy to add to your Hugo site (except we don’t on this site - oops!) Word Count We can use word counts in our theme template. We’ve shown the likely file below, but might change based on your theme and setup.
  • Thumbnail Images on your Hugo Blog Posts –
    Hugo now has the ability to do image resizing, cropping, quality-changing, etc (hooray!) - so how do we use it? In this post we take a look at how to resize images automatically using Hugo. There’s a few different ways to achieve this, depending on what you’re trying to do. In a Theme - “I want to make thumbnails!” You might run a blog, which on the home page has a list of your blog posts.
  • Shorten your Summary: The 2 Methods –
    If you are anything like me and blog about code a lot, you will sometimes want to start with a short paragraph, then straight into some code. Like this: 1 echo "Hello World" Problem: But if you do this, then the .Summary data on your list will look like this (notice the line number and code in it): When perhaps you would like it to look like this (free of code):