How to display a fixed number of posts per page (i.e. pagination)

[yihui]

Normally when you list posts, you use something like range .Data.Pages, which will show all posts in a single list. Sometimes when you have a large number of posts, you may want to show, for example, 10 posts per page, and provide a navigation menu so that readers can go to the next/previous 10 posts. In this case, you can apply .Paginate to .Data.Pages, e.g. range (.Paginate .Data.Pages), and Hugo will automatically retrieve a subset of posts for you to list.

Hugo has provided an internal pagination template to build the navigation menu that consists of page numbers:

{{ template "_internal/pagination.html" . }}

Lastly, you may need to tweak the CSS to display the navigation menu appropriately.

In this example, I set paginate = 1 in config.toml, which is an extreme case. Its default value is 10 (i.e. 10 posts per page). I only have four posts on this example website, and I just want to display them on four pages as an example.

Preview:

• Homepage: https://deploy-preview-16--hugo-xmin.netlify.com/
• Posts: https://deploy-preview-16--hugo-xmin.netlify.com/post/
• Taxonomy: https://deploy-preview-16--hugo-xmin.netlify.com/tags/markdown

Documentation of pagination in Hugo: https://gohugo.io/templates/pagination/

[jrosen48]

Hi, wondering what you are thinking about merging this - I'm interested in using this functionality! Tnx

[yihui]

Here is the background story of all these pull requests: https://yihui.name/en/2017/09/pull-requests-as-a-teaching-tool/

[jrosen48]

Cool. Thanks.

[jrosen48]

Given that layouts/_default/list.html now consists of the following code (due to an update to xmin):

<ul>
  {{ $pages := .Pages }}
  {{ if .IsHome }}{{ $pages = .Site.RegularPages }}{{ end }}
  {{ range (where $pages "Section" "!=" "") }}
  <li>

Instead of this:

<ul>
  {{ range (where .Data.Pages "Section" "!=" "") }}
  <li>

Can you advise what changes should be made to layouts/_default/list.html to display a fixed number of posts?

[yihui]

@jrosen48 Yes, I have updated this PR.