Previous in Series and Next In Series links

support
1

I’m implementing series taxonomy into my blog, and I want to generate a Previous and Next in series buttons. I’ve gotten close, however I can’t seem to get the if logic to work properly due to my limited knowledge of Hugo.

With the below code I have been able to generate the links, but they are always the first and last post in the series due to the ordering by date and the first 1 limitation. Problem is without those, it will generate a next link for every post that follows (and same with previous).

single.html

{{ $currentNode := . }}
        <p class="text-center">Read more posts in {{ .Params.series }}</p>
        {{ range first 1 (where .Site.Pages.ByDate "Params.series" .Params.series) }}
            {{ if ne $currentNode .}}
                {{ if gt $currentNode.Date.Unix .Date.Unix}}
                   <a class="previous-post" href="{{ .Permalink }}">Previous Post</a>
                {{ end }}
            {{ end }}
        {{ end }}
        {{ range first 1 (where .Site.Pages.ByDate.Reverse "Params.series" .Params.series) }}
            {{ if ne $currentNode .}}
                {{ if lt $currentNode.Date.Unix .Date.Unix}}
                   <a class="next-post" href="{{ .Permalink }}">Next Post</a>
                {{ end }}
            {{ end }}
        {{ end }}

You can view the code on github here.

(you’ll have to add the series to other posts to get the links to appear)

2

Actually, I’m pretty sure that the where isn’t working, because I’m seeing links appear on posts that don’t have a series configured. So I don’t think I’m very close.

Basically I want to recreate the templateVars .NextInSection and .PrevInSection, but by taxonomy “series” and the term that matches the current page’s series value.

Because Section is defined as the top level under content, I can’t easily use .PrevInSection, .NextInSection because I want it to live under blog still. I almost need a .NextInSlug, or .NextOfSameType.

3

I’m racking my brain trying to come up with a solution, but I’ve got nothing so far.

One small note: you can use $ as an alias to the default template context. So, instead of using $currentNode, just use $.Date.Unix.

4

I’m interested in a solution to this. I’ve only been playing with Hugo for a couple months, @doctorallen, but my current workaround for this was to just add a series_no: to the front matter, but I’m not sure that a) this fits your use case or b) is practically if you have an exceptionally large number of entries in a particular series.

5

I’m currently using the following in single.html to generate the Previous & Next links in a series of posts:
{{ if .NextInSection }} <a href="{{.NextInSection.Permalink}}">Previous Post</a> {{ end }} {{ if .PrevInSection }} <a href="{{.PrevInSection.Permalink}}">Next Post</a> {{ end }}

And specify the tag in the post front matter

2 Likes
6

@alexandros
This doesn’t work as it displays a link to the next post under the section, which in the documentation is defined as the top level folder directly under content:

.
└── content
    ├── post
    |   ├── firstpost.md       // <- http://1.com/post/firstpost/
    |   ├── happy
    |   |   └── ness.md        // <- http://1.com/post/happy/ness/
    |   └── secondpost.md      // <- http://1.com/post/secondpost/
    └── quote
        ├── first.md           // <- http://1.com/quote/first/
        └── second.md          // <- http://1.com/quote/second/

In this case, post and quote are both sections.

However, my content tree looks like this:

.
└── content
    ├── blog
    |   ├── firstpost.md       // <- http://1.com/post/firstpost/
    |   ├── happy
    |   |   └── ness.md        // <- http://1.com/post/happy/ness/
    |   |   └── stuff.md        // <- http://1.com/post/happy/stuff/
    |   └── secondpost.md      // <- http://1.com/post/secondpost/

And I only want the links to show up on ness and stuff pages, and they only have links to posts under “happy” but that is considered the “slug” and not a Section. So basically you need a .NextInSubSection, or .NextInSlug variable.

7

Sorry for digging so deep in history, but I solved that problem.

I used that to generate blog series links on my blog: www.itchyfeet.pl (blog is in polish)

My piece of code is following:

{{ range where .Site.Pages.ByDate "Params.series" .Params.series }}
    {{ if gt $.Date.Unix .Date.Unix }}
      {{ $.Scratch.Set "previous" .Permalink }}
    {{ end }}
{{ end }}
{{ range where .Site.Pages.ByDate.Reverse "Params.series" .Params.series }}
    {{ if lt $.Date.Unix .Date.Unix }}
      {{ $.Scratch.Set "next" .Permalink }}
    {{ end }}
{{ end }}

<ul class="actions pagination">
<li><a href="{{ if $.Scratch.Get "previous" }}{{ $.Scratch.Get "previous" }} {{ end }}" class="{{ if not ($.Scratch.Get "previous") }}disabled {{ end }}button big previous">Next</a></li>
<li><a href="{{ if $.Scratch.Get "next" }}{{ $.Scratch.Get "next" }} {{ end }}" class="{{ if not ($.Scratch.Get "next") }}disabled {{ end }}button big next">Previous</a></li>
</ul>
3 Likes
8

Thanks for posting this. Trying to wrap my head around hugo variables to make this functionality work.

Your Previous and Next text are backwards (the visible text in the link.)

9

I am looking for a solution for a “subsection navigation” too…

@Przemyslaw_Szypowicz I didn’t manage to make your code work.

edit: I use this solution instead

10

thanks bro your code work well for me