Hugo Template Snippet - Pagination

pagination.html

{{ $pag := $.Paginator }} {{ if gt $pag.TotalPages 1 }} {{ $.Scratch.Set "dot_rendered" false }}

<ul class="pagination">
    <!-- Disable on 1st and 2nd page -->
    {{ if and (ne $pag.PageNumber 1) (ne $pag.PageNumber 2) }}
    <li class="page-item page-first"><a href="{{ $pag.First.URL }}" rel="first" class="page-link">« First</a></li>
    {{ else }}
    <li class="page-item page-first disabled"><a href="" rel="first" class="page-link">« First</a></li>
    {{ end }} {{ if $pag.HasPrev }}
    <li class="page-item page-prev"><a href="{{ $pag.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
    {{ else }}
    <li class="page-item page-prev disabled"><a href="" rel="prev" class="page-link">‹ Prev</a></li>
    {{ end }} {{ range $pag.Pagers }} {{ if eq . $pag }}
    <!-- Current Page -->
    <li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
    {{ else if and (ge .PageNumber (sub $pag.PageNumber 1)) (le .PageNumber (add $pag.PageNumber 1)) }} {{ $.Scratch.Set "dot_rendered" false }}
    <!-- Render prev 2 page and next 2 pages -->
    <li class="page-item page-next-prev"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
    <!-- render skip pages -->
    {{ $.Scratch.Set "dot_rendered" true }}
    <li class="page-item page-filler disabled"><a class="page-link" href="#">...</a></li>
    {{ end }} {{ end }} {{ if $pag.HasNext }}
    <li class="page-item page-next"><a href="{{ $pag.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
    {{ else }}
    <li class="page-item page-next disabled"><a href="" rel="next" class="page-link">Next ›</a></li>
    {{ end }}
    <!-- Don't show on last and 2nd last page -->
    {{ if and (ne $pag.PageNumber $pag.TotalPages) ((ne $pag.PageNumber (sub $pag.TotalPages 1))) }}
    <li class="page-item page-last"><a href="{{ $pag.Last.URL }}" rel="last" class="page-link">Last »</a></li>
    {{ else }}
    <li class="page-item page-last disabled"><a href="" rel="last" class="page-link">Last »</a></li>
    {{ end }}
</ul>

{{ end }}