How To Add Pagination To Your Hugo Blog

I recently moved my blog from Jekyll to Hugo, using the Hugo Zen theme. While I love the simplicity of the theme (and its use of Skeleton instead of Bootstrap), it doesn’t come with pagination already baked in. So, I decided to add some of my own. For reference, the Hugo docs do indeed cover pagination, but it wasn’t totally intuitive to me. So, here’s how I tackled it:

In the layouts/partials folder, I created a new file called pagination.html

{{ $pag := $.Paginator }} {{ if gt $pag.TotalPages 1 }} {{ end }}

Next, in my index.html, I called the Paginate object:

{{ partial "header.html" . }}
    {{ $pag := .Paginate (where .Data.Pages ".Params.hidefromhome" "!=" "true") }} {{ range $pag.Pages }} {{ end }}
{{ partial "pagination.html" . }}
{{ partial "footer.html" . }}

And that’s it! Hope this helps.

comments powered by Disqus