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

  • 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.
  • Hide a Page in Hugo –
    Option 1: Draft The simplest way to hide a page when using Hugo is probably to set the post as a draft. This way, you still have the content ready to go for when you need it. To hide a page by setting it as draft, so our drafts page: Set Post as Draft Tutorial Option 2: Hide from Posts List You still want the page to be visible, but you don’t want to show it your blog posts list?