Hugo Pagination Partial for Bootstrap4
🖊️ Austin Riba ⌚ 🔖 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 >}}