Pagination broken after updates

As per line 3 of the template under layouts/devblog/list.html you are invoking {{ range .Pages }} and not the Paginator’s pages, yet further down in line 52 you are invoking the themes pagination partial, that is why you are getting a broken pagination list.

Currently the problem is apparent in the devblog section as this section has more than 5 posts and Hugo’s pagination kicks in. The problem will appear in the other sections once you create more posts for them.

The fix is slightly complicated due to certain decisions made by the Hello Friend theme author, that will cause code duplication in a setup like yours.

To fix the issue and avoid duplicate code you will need to override the theme’s _default/baseof.html template.

Duplicate the template path under the layouts folder you have already created under the root of your project and then paste the following code in line 12

 {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
  {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}

  {{ $PageContext := . }}
  {{ if .IsHome }}
    {{ $PageContext = .Site }}
  {{ end }}
  {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
  {{ .Scratch.Set "paginator" $paginator }}

You will notice that the above code for the most part originates from the theme’s homepage template.

You will also need to override this template. Again duplicate it as above in the layouts folder under the root of your project and delete lines 2-9, since we have already moved them to the baseof.html template.

Now in my code block above you may notice that I have added the following:
{{ .Scratch.Set "paginator" $paginator }}

In Hugo templates variables are limited to the template’s scope. Therefore the $paginator variable definition will be lost in other templates below the baseof.html template.

To make $paginator available in these templates the simplest way would be to store it in a “Scratchpad” for later retrieval.

After doing the above change line 3 of layouts/devblog/list.html to:
{{ range (.Scratch.Get "paginator").Pages }}

So that you can retrieve the paginator scratch.

You will also need to make this change in the list templates of your other sections games and stories.

Finally run hugo server and you will see that there is a functional paginator list across all sections.

1 Like