Based on this answer, if displayPaginator = true, is it possible to define custom pagination instead which is in the partials folder rather than Hugo’s? cc @jmooring
Yes, just change the call in layouts/_default/multipage.html.
Just out of curiosity, is there something in particular about the embedded pagination template that is undesirable or missing?
I am not a fan of navigations that overflow on small devices (since I have to use a larger line height to make them jump to the next line). Also, some spans being inside the <a> tag made styling them a bit problematic. I use simple pagination with previous, current and next post features. But I will revisit the internal pagination within a week once I have my test site up and running on Cloudflare pages. I also found this issue which I am unsure if it was resolved.
Here’s a test site (10,000 pages) we used during some performance improvements on the internal pagination template:
git clone --single-branch -b hugo-github-issue-8602 https://github.com/jmooring/hugo-testing hugo-github-issue-8602
cd hugo-github-issue-8602
hugo server
And the lighthouse results:
Related to width… by default there are as many as 9 buttons (first, prev, slots 1-5, next, last). But there’s an undocumented, alternate format that reduces that to a maximum of 7 buttons (first, prev, slots 1-3, next, last). Details here:
https://github.com/gohugoio/hugo/pull/8602#issue-908705409
Related to styling… the structure and class names are, I think, standard (if such a thing exists). For example, out of the box with Bootstrap it looks and works as expected.
The test site that I referenced above includes some CSS for the nav; perhaps there’s something useful in there for you.
2 Likes
Thanks for this. I will test it out. Btw, how do I make your answer work with [permalink] defined as post= "/:slug/"? It only showed the first page.
Edit: the ‘terse’ is a good option. The CSS issue mentioned below remains though.
I have checked the classes again and redid the styling! Now using the internal pagination.
Is there a way to hide first and last link? or do I use CSS?
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.