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 a 404 Not Found Page –
    In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them. To make yours, you can add a file into your layouts folder.
  • Markdown for Hugo: Cheatsheet –
    This is designed to be a ‘cheatsheet’ to help you find the syntax you need quickly for creating markdown content on Hugo sites. Code Block 1 2 3 4 5 ```css body { background: red; } ``` To define a code block, wrap the code in backticks like: ` Three of them, and you can define the code language after the first set, like we’ve said the above code is css.
  • Using Emoji In Posts & Themes –
    Emojis have been named word of the year and are seen every day in modern culture. We use them every day on our messaging apps, emails and … err blogs! This post is about how you can enable and use them in both your Hugo themes and, in general, when writing posts. Using Emojis in Themes To use them within your theme, there’s a built in function which turns text in emojis.