Add previous / next articles with hugo
I'm a Team Lead and Solutions Architect during the day, lazy "Dev Sec Ops" at night with a passion for selfhosting and data privacy. Free and Open Source advocate since 2005, I sporadically write Blog or Gemlog posts and share short notes and bookmarks on my website.
Another short post about my hugo configuration update, as I have added navigation for previous / next posts.
To do so, I added a configuration in config.toml:
[params]
[…]
enableNextPrevPages = true
Then, in the single.html template file, I added:
{{ if .Site.Params.enableNextPrevPages }}
{{ partial "article-prevnext.html" . }}
{{ end }}
And then created the =article-prevnext.html" partial:
<div class="article-nextprev">
<div class="next-post">
{{ if .NextInSection }}
<a class="link-reverse" href="{{ .NextInSection.Permalink }}?ref=footer">« {{ .NextInSecti#
{{ end }}
</div>
<div class="previous-post">
{{ if .PrevInSection }}
<a class="link-reverse" href="{{ .PrevInSection.Permalink }}?ref=footer">{{ .PrevInSection#
{{ end }}
</div>
</div>
The .NextInSection and .PrevInSection allow to link to only other blog posts and not bookmarks or gemlog entries.
And added to the CSS file this simple line:
.article-nextprev{
display:flex;
flex-flow: row wrap-reverse;
justify-content: space-between;
}