Hugo Pagination Partial for Bootstrap4

🖊️ 🔖 code 💬 0

Hugo’s internal template for pagination claims it works with Bootstrap styles. That may have been the case for Bootstrap3, but now that 4 is out, it requires a few more classes.

Below is a template that can be used as a partial in your theme based on Hugo’s internal template with additional Bootstrap4 classes. You can see it in action on this blog’s front page.

{{< highlight go-html-template >}} {{ $pag := $.Paginator }} {{ if gt $pag.TotalPages 1 }}

    {{ with $pag.First }}
  • {{ end }}
  • {{ $.Scratch.Set "__paginator.ellipsed" false }} {{ range $pag.Pagers }} {{ $right := sub .TotalPages .PageNumber }} {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }} {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2))) }} {{ if $showNumber }} {{ $.Scratch.Set "__paginator.ellipsed" false }} {{ $.Scratch.Set "__paginator.shouldEllipse" false }} {{ else }} {{ $.Scratch.Set "__paginator.shouldEllipse" (not ($.Scratch.Get "__paginator.ellipsed") ) }} {{ $.Scratch.Set "__paginator.ellipsed" true }} {{ end }} {{ if $showNumber }}
  • {{ .PageNumber }}
  • {{ else if ($.Scratch.Get "__paginator.shouldEllipse") }}
  • {{ end }} {{ end }}
  • {{ with $pag.Last }}
  • {{ end }}

{{ end }} {{< / highlight >}}