Pagination in hugo is not working as expected

Question

I only want 5 post summaries to be displayed, per page, in my hugo theme

In my config.toml file I have placed the following value:

pagination = 5

My themes/<theme_name>/layouts/_default/list.html looks like this:

{{ define "main" }}
<div class="container">
<h1>{{ .Title }}</h1>
{{ range .Paginator.Pages.ByPublishDate.Reverse }}
<p>
<h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{ partial "metadata.html" . }}
<p>{{ .Summary }}</p>
</p>
<a href="{{ .RelPermalink }}" className='text-decoration-none'><button type="button" class="btn btn-outline-danger">Read More</button></a>
{{ end }}
{{ template "_internal/pagination.html" . }}
</div>
{{ end }}

Which from everything I've read, including the docs, should work

However this has no effect on my posts page where the list of posts is displayed. I have 6 posts currently, and all posts are listed on the same page, with no pagination settings displayed. There are no errors returned by when doing a hugo server -D

I have tried to remove the .ByPublishDate.Reverse from the range value, but that also has no effect

I believe I have missed something fundamental, but I'm not sure where to look next. Any help would be appreciated.

Luiz Campos · Accepted Answer · 2023-02-12T18:49:09.837

You need to make sure that your list.html template is using the .Paginate function to actually paginate your posts.

Replace your {{ range .Paginator.Pages.ByPublishDate.Reverse }} line with the following:

{{ range (.Paginate (where .Data.Pages "Type" "post")).Pages }}

This will use the .Paginate function to paginate only the pages of type post (which should include your blog posts), and then loop through each page of posts using the .Pages function.

Additionally, you may want to modify your {{ template "_internal/pagination.html" . }} line to include some styling and/or text to make it clear that pagination is in effect.

Example:

<div class="pagination">
  {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">← Newer Posts</a>
  {{ end }}
  {{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">Older Posts →</a>
  {{ end }}
</div>

Thanks for the tip @Luiz Campos. Using `{{ range (.Paginate (where .Data.Pages "Type" "post")).Pages }}` gives me the same result, all my posts are displayed and pagination does not take effect — Molenpad, Feb 12 '23 at 19:07
Actually, that does work when the paginate = 5 is placed at the top of the config.toml and not at the bottom — Molenpad, Feb 12 '23 at 19:09

Pagination in hugo is not working as expected

1 Answers1