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

  • Changing the Syntax Highlighting Style in Hugo –
    When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box. In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.
  • Add Adsense Ads to Your Posts –
    This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site. You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option). There’s a few different ways to achieve this, based on where you want them.
  • 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.