Simple Pagination for Hugo

tips & tricks
1

Save this as pagination.html file inside layouts/partial and call it wherever you want it to appear using {{ partial "pagination.html" . }}. You will need CSS to style it as you want.

{{ $n := .Paginator }}
 {{ if gt $n.TotalPages 1 }}
  <nav id="pagination" class="pagination">
   {{ if $n.HasPrev }}
     <a class="previous" href="{{ $n.Prev.URL }}">
       &laquo; Prev<span class="screen-reader-text">Page</span>
     </a>
  {{ else }}
    <span class="previous">&laquo; Prev<span class="screen-reader-text">Page</span></span>
  {{ end }}
	<span class="page-number ">
     Page: {{ $n.PageNumber }} of {{ $n.TotalPages }}
    </span>
  {{ if $n.HasNext }}
	<a class="next" href="{{ $n.Next.URL }}">Next &raquo;<span class="screen-reader-text">Page</span></a>
  {{ else }}
	<span class="next">Next &raquo;<span class="screen-reader-text">Page</span></span>
  {{ end }}
 </nav>
{{ end }}

screen-reader-text needs to be hidden and only read out by screen readers and here is some CSS to do it.

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important;
}
1 Like