How to implement pagination in Hugo

First of all, a big thanks❤️ to the hugo community for creating & maintaining this amazing piece of technology.


In this post, I’ll describe how to implement pagination just by writing 4 lines of code in hugo. Again, thanks to hugo for making this process so simple.

In order to get started, we have to do some changes in our config.toml file. They being:

• paginate = 1 ‘1’ because of testing, we can change this number later. paginate represents the number of posts that’ll be shown per page. By default, it is 10.
• paginatePath We’ll leave this as it is. By default it is set to path. According to the official documentation of hugo, paginatePath is used to adapt the URL to the pages in the paginator (the default setting will produce URLs on the form /page/1/).
  
  Now, in your list.html or taxonomy.html wherever you want to put the pagination, you just have to add the .Paginator class to it & just add hugo’s internal pagination template at the bottom to create a basic navigation. Like:
  
  

  <ul>
      <!-- Ranges through content/posts/*.md -->
      {{ range .Paginator.Pages }}
          <li>
              <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
          </li>
      {{ end }}
      {{ template "_internal/pagination.html" . }}
  </ul>

  
  Hurray 🎉, we’ve actually implemented pagination just by 4 lines of code🍻. We can now control the number of posts/page by changing the value of paginate in config.toml.

Now, I know the style of the navigation sucks😔, but it can be changed easily by CSS flexbox. But, if you want to implement your own navigation, & Hugo even provided options for that too🎊.
I’ll discuss some of my favourites here:

• PageNumber - The current page you’re seeing.
• TotalPages - The total no. of pages.
• HasPrev, HasNext - Whether there are any previous/next pages.
• Prev, Next - The pager for the previous/next page.
• URL - The relative URL to the current pager.