Pagination issue in my site

support
1

Hi All,

I have created pagination.html file inside partials. Now I want to implement pagination inside my blogs page. In my blogs page I am having almost 90 cards so for the cards I want to implement pagination. I am having a shortcode called cards I tried implementing pagination but I faced lot of issues. I followed many youtube videos still same issue. So I manually created shortcode call pagination using javascript code. Now pagination is working fine. But issue is when I try to use pagination two times in same page its not working. I think its because of same class and Id. Can any one please tell me the correct way of implementing Hugo pagination to my cards? Please…

3 Likes
2

Don’t try to paginate within a shortcode.

Typically you would paginate your “blog” list page by doing something like this (no Javascript):

layouts/blog/list.html

{{ range (.Paginate .Pages).Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ template "_internal/pagination.html" . }}

Make sure you don’t paginate the same list twice:

If you call .Paginator or .Paginate multiple times on the same page, you should ensure all the calls are identical. Once either .Paginator or .Paginate is called while generating a page, its result is cached, and any subsequent similar call will reuse the cached result. This means that any such calls which do not match the first one will not behave as written.

3

Hi jmooring Thanks for your reply. I followed same but I am getting issue like – "execute of template failed at <.Page>: can’t evaluate field Page in type string ". I am not able o resolve this issue.

4

Please post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

5

Yes jmooring, this is my git repository link…
Note: to run project use “npm run start”. When you click on (http://localhost:1313/), please add “/sg/” in url.

6

Hugo’s pagination feature is for pages, not data, and its invocation is limited to page kinds home, section, taxonomy, and term.

8

Okay you mean pagination will not work for data coming from json files? then Is there any way that I can handle it? please tell me

13

Yes, that’s what I mean.

You have two options:

  1. Use JavaScript
  2. Use the “pages from data” approach described here
14

Thank you. I tried 1st option in past its fine when I try to use one time in one page. But its not working when I try two pagination in one page. I think its because of classes conflicts. Can you suggest me how can I use same pagination in single page two times. For example I have two sections like news and events. For news I need one and for Events I need one pagination.

15

Assistance with JavaScript is off-topic for this forum. You might try Stack Overflow or similar.

16

Okay Thanks for your patience, time and support.