[Hugo]: Pagination

Hi.  Today I show you my Hugo SSG pagination template (go to /layouts/partials/_pagination.html):

<div>
 {{ $paginator := .Paginator }}
  <!-- Number of links either side of the current page. -->
  {{ $adjacent_links := 2 }}
  <!-- $max_links = ($adjacent_links * 2) + 1 -->
  {{ $max_links := (add (mul $adjacent_links 2) 1) }}
  <!-- $lower_limit = $adjacent_links + 1 -->
  {{ $lower_limit := (add $adjacent_links 1) }}
  <!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
  {{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
  <!-- If there's more than one page. -->
  {{ if gt $paginator.TotalPages 1 }}
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
      <!-- First page. -->
      {{ if ne $paginator.PageNumber 1 }}
      <li class="page-item">
        <a class="page-link hover-ripple" href="{{ $paginator.First.URL }}">
          ««
        </a>
      </li>
      {{ end }}
      <!-- Previous page. -->
      {{ if $paginator.HasPrev }}
      <li class="page-item">
        <a href="{{ $paginator.Prev.URL }}" class="page-link hover-ripple">
          «
        </a>
      </li>
      {{ end }}
      <!-- Page numbers. -->
      {{ range $paginator.Pagers }}
      {{ $.Scratch.Set "page_number_flag" false }}
      <!-- Advanced page numbers. -->
      {{ if gt $paginator.TotalPages $max_links }}
      <!-- Lower limit pages. -->
      <!-- If the user is on a page which is in the lower limit.  -->
      {{ if le $paginator.PageNumber $lower_limit }}
      <!-- If the current loop page is less than max_links. -->
      {{ if le .PageNumber $max_links }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Upper limit pages. -->
      <!-- If the user is on a page which is in the upper limit. -->
      {{ else if ge $paginator.PageNumber $upper_limit }}
      <!-- If the current loop page is greater than total pages minus $max_links -->
      {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Middle pages. -->
      {{ else }}
      {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      {{ end }}
      <!-- Simple page numbers. -->
      {{ else }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Output page numbers. -->
      {{ if eq ($.Scratch.Get "page_number_flag") true }}
      <li class="page-item{{ if eq . $paginator }} page-item active {{ end }}">
        <a href="{{ .URL }}" class="page-link hover-ripple">
          {{ .PageNumber }}
        </a>
      </li>
      {{ end }}
      {{ end }}
      <!-- Next page. -->
      {{ if $paginator.HasNext }}
      <li class="page-item">
        <a href="{{ $paginator.Next.URL }}" class="page-link hover-ripple">
          »
        </a>
      </li>
      {{ end }}
      <!-- Last page. -->
      {{ if ne $paginator.PageNumber $paginator.TotalPages }}
      <li class="page-item">
        <a class="page-link hover-ripple" href="{{ $paginator.Last.URL }}">
          »»
        </a>
      </li>
      {{ end }}
    </ul>
  </nav>
  {{ end }}
</div>

Don't forget to include the count of posts that will be displayed per page in config.toml:

# post pagination
paginate = "8"

In folder layouts inside your collection type (section) in list.html, include our pagination template:

<div class="">

   <div class="">
    {{ $paginator := .Paginate .Data.Pages }}
    {{ range $paginator.Pages }}
    {{ "<!-- blog post -->" | safeHTML }}
    <article class="">
      {{ .Render "post"}}
    </article>
    {{ end }}
   </div>

   {{"<!-- pagination -->" | safeHTML }}
   {{- partial "_pagination.html" . -}}
   {{"<!-- /pagination -->" | safeHTML }}

</div>

Hugo SSG official documentation.