Last active
April 28, 2017 03:20
-
-
Save andrelug/71558d8c92c17c239a274c1ab0f63d18 to your computer and use it in GitHub Desktop.
Pagination for Hugo Websites
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="navigation pagination" role="navigation"> | |
<div class="nav-links"> | |
{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} | |
<!-- Create variable to store current page --> | |
{{ $current := .Paginator.PageNumber }} | |
<!-- I decided that I'll only show the first option when current page is greater than 4 --> | |
{{ if ge $current 4 }} | |
<a class="prev page-numbers" href="{{.Paginator.First.URL}}">First</a> | |
{{ end }} | |
<!-- Check for previous page number --> | |
{{ if .Paginator.HasPrev }} | |
<a class="prev page-numbers" href="{{.Paginator.Prev.URL}}">Prev</a> | |
{{ end }} | |
<!-- Same as 'First' --> | |
{{ if ge $current 4 }} | |
<span class="page-numbers dots">…</span> | |
{{ end }} | |
<!-- Run through the total number of paginated pages --> | |
{{ range $i, $sequence := (seq .Paginator.TotalPages) }} | |
<!-- This part is very hard coded, so I only allow two pages before and after to be shown. | |
You can a sub 3 and an add 3 and so on to display more numbers in the middle. --> | |
{{ if eq $sequence $current }} | |
<span class="page-numbers current">{{ $sequence }}</span> | |
{{ else if eq $sequence (add $current 1) }} | |
<a class="page-numbers" href="/page/{{ $sequence }}/">{{ $sequence }}</a> | |
{{ else if eq $sequence (add $current 2) }} | |
<a class="page-numbers" href="/page/{{ $sequence }}/">{{ $sequence }}</a> | |
{{ else if eq $sequence (sub $current 1) }} | |
<a class="page-numbers" href="/page/{{ $sequence }}/">{{ $sequence }}</a> | |
{{ else if eq $sequence (sub $current 2) }} | |
<a class="page-numbers" href="/page/{{ $sequence }}/">{{ $sequence }}</a> | |
{{ end }} | |
{{ end }} | |
<!-- Similar to the beggining I only want to show '...' after the numbers if there are more than 5 pages and if the current page is less or equal than the total minus 3 --> | |
{{ if ge .Paginator.TotalPages 5}} | |
{{ if le $current (sub .Paginator.TotalPages 3) }} | |
<span class="page-numbers dots">…</span> | |
{{ end }} | |
{{ end }} | |
<!-- Check for next pages --> | |
{{ if .Paginator.HasNext }} | |
<a class="next page-numbers" href="{{.Paginator.Next.URL}}">Next</a> | |
{{ end }} | |
<!-- Same as '...' --> | |
{{ if ge .Paginator.TotalPages 5}} | |
{{ if le $current (sub .Paginator.TotalPages 3) }} | |
<a class="next page-numbers" href="{{.Paginator.Last.URL}}">Last</a> | |
{{ end }} | |
{{ end }} | |
{{ end }} | |
</div> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment