Pagination not working on Homepage, but works on the List template page

support
1

List template (baseurl/posts/) page works fine, it displays few posts then there is a button to load-more (infinity-scroll script), then I can view more posts. Homepage doesn’t display any list of posts. It can not see any posts.

index.html template (code redacted):

{{- partial "pagination.html" . -}}

partials/pagination.html:

<section>
    <div class="latest-posts-section">
      <div class="loop-wrap">
        {{ $paginator := .Paginate (where .Pages "Type" "in" site.Params.mainSections) }}
        {{ if $paginator }}
        {{- range $paginator.Pages -}}
        {{ partial "post-card.html" . }}
        {{ end }}
      </div>
      <div class="break"></div>
      {{ if gt (len (where .Pages "Type" "in" site.Params.mainSections )) 6 }}
      <div class="pagination">
        {{ with $paginator }}
        <a href="/posts/page/2/" aria-label="Load more" style="display: none;"></a>
        <button class="button-primary">Load more</button>
        {{ end }}
      </div>
      {{ end }}
      {{ end }}
    </div>
</section>
2

https://gohugo.io/variables/page/#pages

.Pages
Collection of regular pages and only first-level section pages under the current list page.

The .Pages collection will be different depending on the current list page.

In your code, change .Pages to site.RegularPages.

3 
where site.RegularPages

not working

4

I moved post.md files under “content” directory instead “posts” subdirectory (removed “posts” section) and changed the code into:

<section>
    <div class="latest-posts-section">
      <div class="loop-wrap">
        {{ $paginator := .Paginate .RegularPages }}
        {{ if $paginator }}
        {{- range $paginator.Pages -}}
        {{ partial "post-card.html" . }}
        {{ end }}
      </div>
      <div class="break"></div>
      <div class="pagination">
        <a href="/posts/page/2/" aria-label="Load more" style="display: none;"></a>
        <button class="button-primary">Load more</button>
      </div>
      {{ end }}
    </div>
</section>

Now, I have weird behaviour.
Homepage works fine.
Tags (taxonomy) list page, first post-cards are not displayed, but when clicked “Load more” then next posts are displayed correctly.

5

Yes, it is. Try it:

git clone --single-branch -b hugo-forum-topic-41917 https://github.com/jmooring/hugo-testing hugo-forum-topic-41917
cd hugo-forum-topic-41917
hugo server

Additionally, you have hardcoded the page collection in your “pagination” partial. That’s not going to work. I suggest you pass a page collection to the partial.

1 Like