Pagination broken after updates

[IMG_Alone]

Hello,

I require some assistance please. I have updated my hugo version and my theme and broke pagination. My webdev knowledge is limited, but I have tried multiple things before deciding to write this post. I will try to describe everything to the best of my ability.

• Problem site example: Devblogs :: Iancu Makes Games Alone — Indie Games and Stories
• Theme in use: GitHub - panr/hugo-theme-hello-friend: Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
• Hugo version:

Hugo Static Site Generator v0.80.0-792EF0F4 windows/amd64 BuildDate: 2020-12-31T13:37:57Z
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.15.1"

• Problem description: in my config.toml, I have paginate = 5, so I would expect that whenever I go to the Devblog section (I got 9 posts in it) (or click on a tag, or go to another section that has more than 5 posts), hugo would generate a list of 5 posts with a button at the bottom and if I click that button it takes me to the next page where I find the remaining 4 posts. Current behaviour - I get a list of 9 posts with the button at the end, and if I click that button I get the same list (but reloaded).

The only place where I found something about pagination is in .../themes/hello-friend/layouts/_default/index.html:

{{ define "main" }}
  {{ $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) }}
...

One more thing I should mention is that none of my blog-type sections are defined as “posts”. In my config.toml, I have:

...
[params]
  # dir name of your blog content (default is `content/posts`)
  contentTypeName = "devblog"
  contentTypeNameType2 = "games"
  contentTypeNameType3 = "stories"
...

That being said, going back to the index, I understand the code like so:

• if contentTypeName param is not “posts” or empty, define local variable $contentTypeName with value “posts”
• this is my case, since I don’t use “posts”, but “devlog” for the param contentTypeName
• next it assesses the page context, and since this is not the homepage, $PageContext = .
• finally, we have $paginator := .Paginate (where .RegularPages "Type" "posts")

I copied the index.html file in my /site/layouts/_defaults/index.html and tried to change different things, like removing all the logic and leaving just

{{ define "main" }}
  {{ $paginator := .Paginate (where .RegularPages "Type" "devblog") }}

and then different variations:
{{ $paginator := .Paginate (where .Site.RegularPages "Type" "devblog") }}
{{ $paginator := .Paginate (where .Pages "Type" "devblog") }}
…
but am always getting the same result.

Any help would be appreciated.

Best regards,
Iancu

[alexandros]

We cannot help you without seeing the source code of your project or at least a repo with dummy content that reproduces the problem.

There can be several things that cause the issue you describe and we need to see the full context.

The link to the theme repo and a description of the problem is not enough in your case.

Also please have a look at the forum Requesting Help guidelines.

[IMG_Alone]

Hi @onedrwingperday and thanks for taking the time to answer. I made my repo public for this, you can access it here:

imgalone/imgalonecom

Also please have a look at the forum Requesting Help guidelines. I read those twice, that’s why I took the time to formulate my post like I did. Did I do something wrong? Is there something in particular I might’ve missed that made you suggest that?

[alexandros]

@IMG_Alone

Did I do something wrong? Is there something in particular I might’ve missed that made you suggest that?

No there was nothing wrong. As I said above the source code of the project was needed in this case. I simply referred you to the Help topic for a further look.

I will have a look later today, unless someone else has a look before me.

[alexandros]

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.

[IMG_Alone]

Hi @alexandros,

Thanks again for coming to my aid. I tried to apply the solution as you suggested:

• copied the baseof.html super template to my own layouts/_defaults/baseof.html, then added the part responsible for paginating PLUS a last line that does scratching so I can access the same paginator as a variable from other templates
• copied themes/hello-friend/layouts/_default/index.html to my own layouts/_defaults/index.html to remove the piece of code that was added above to baseof.html
• changed pagination to 4 in config to be able to test on both devlog and games
• changed the list.html for games and devblog but got the same results - now I can’t see any posts at all, nor the text on the older/newer pagination buttons:

• if I delete my own layouts/index.html and leave just this newly modified one the devblog and games are still corrupt but on the home page, beneath the logo/site picture I can see the posts (from devblog) correctly paginated, but this is not what I am after

I committed all the above in the develop branch in the last commit:

Applied pagination solution as suggested by onedrawingperday:

While testing, I also tried to replace my own layouts/devblog/list.html with the contents of the modified homepage template, but got the same results. My understanding of hugo’s innards and this problem falters at the point of modifying the template for the homepage - I mean I don’t understand why modifying that one would impact how the devblog list is generated.

[IMG_Alone]

So in the above post I had made a mistake:

“It seems I made a mistake when creating my own layouts/default folder - I added an s at the end by mistake” → after having corrected that mistake (changing the folder name), the solution works but only for devlog. Games and stories no longer show anything (and stories shouldn’t be paginated).

[alexandros]

Right.

Now this is what happens because I didn’t quite pay attention to the Hello Friend template constructs.

But we are going to fix this by throwing out the theme’s logic because it is flawed and it makes it impossible to extend the theme as you need.

---

First off all remove lines 10-13 from the config in the develop branch (they are not needed)

Second replace lines 14-21 of /layouts/_default/baseof.html with the following one liner:

{{ $paginator := .Paginate (where site.RegularPages "Type" "in" .Section) }}

(rough explanation of the above: paginate Pages whose Type (alias of Section) is in the Section that their content files belong to).

Third change line 4 layouts/stories to range .RegularPages and finally remove the paginator partial from line 60 since this Section shouldn’t be paginated.

---

With the above you should be good to go.

Also this is an illustration of complex logic that in the end backfires upon itself.

Keeping Hugo templates simple is essential for a flexible theme.

[IMG_Alone]

Hello @alexandros,

Thank you, it is now working. And also thanks for taking the time to explain your solution, I really am trying to understand things better.

I created an issue on github even before starting this thread, hopefully the theme author will draw some conclusions.

Best regards,
Iancu

[alexandros]

@IMG_Alone

I just saw the GitHub issue you filed at the Hello Friend repo.

Technically your problem is not a bug of the theme as you put it.

The original problem was due to not configuring Pagination properly in your list templates, as I explained above.

You wanted to extend the theme with Pagination on selected Sections.
The Hello Friend theme by default provides Pagination only on the Homepage and not on Sections.

Therefore you are asking the theme author for a new feature.

[IMG_Alone]

Understood. I added a note to reflect the fact that it’s not a theme bug, but I left the issue opened because I still think the author or someone involved in its development should have a look at this thread.