FEATURE: shorten pagination bar when it is too long.

This commit is contained in:
FarseaSH 2024-07-03 21:14:46 +08:00
parent 5ad98eeadb
commit 243696b49f
3 changed files with 89 additions and 53 deletions

View file

@ -1,6 +1,6 @@
{{ define "main" }} {{ define "main" }}
<div class="container bodycontainer"> <div class="container">
{{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }} {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section).ByParam "top") }}
{{ range $i, $page := $paginator.Pages }} {{ range $i, $page := $paginator.Pages }}
{{ partial "row.html" (dict "page" $page "index" $i) }} {{ partial "row.html" (dict "page" $page "index" $i) }}
{{ end }} {{ end }}
@ -9,30 +9,6 @@
{{ define "pagination" }} {{ define "pagination" }}
{{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }} {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section).ByParam "top") }}
{{ if $paginator.HasPrev }} {{ partial "pagination.html" (dict "paginator" $paginator) }}
<a class="page-link" href="{{ $paginator.Prev.URL }}"> {{ end }}
<div class="page-item">< Prev</div>
</a>
{{ else }}
<div class="page-item disabled">< Prev</div>
{{ end }}
{{ $current_num := $paginator.PageNumber }}
{{ range $i, $pager := $paginator.Pagers }}
{{ $i = add $i 1}}
{{ if (eq $current_num $i)}}
<div class="page-item active">{{ $i }}</div>
{{ else }}
<a class="page-link" href="{{ $pager.URL }}"><div class="page-item">{{ $i }}</div></a>
{{ end }}
{{end}}
{{ if $paginator.HasNext }}
<a class="page-link" href="{{ $paginator.Next.URL }}">
<div class="page-item">Next ></div>
</a>
{{ else }}
<div class="page-item disabled">Next ></div>
{{ end }}
{{ end }}

View file

@ -13,28 +13,5 @@
{{ define "pagination" }} {{ define "pagination" }}
{{ $paginator := .Paginate (.Site.RegularPages.ByParam "top") }} {{ $paginator := .Paginate (.Site.RegularPages.ByParam "top") }}
{{ if $paginator.HasPrev }} {{ partial "pagination.html" (dict "paginator" $paginator) }}
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
<div class="page-item">< Prev</div>
</a>
{{ else }}
<div class="page-item disabled">< Prev</div>
{{ end }}
{{ $current_num := $paginator.PageNumber }}
{{ range (seq 1 $paginator.TotalPages) }}
{{ if (eq $current_num .)}}
<div class="page-item active">{{.}}</div>
{{ else }}
<a class="page-link" href="{{$.Site.BaseURL}}/{{.}}"><div class="page-item">{{.}}</div></a>
{{ end }}
{{end}}
{{ if $paginator.HasNext }}
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
<div class="page-item">Next ></div>
</a>
{{ else }}
<div class="page-item disabled">Next ></div>
{{ end }}
{{ end }} {{ end }}

View file

@ -0,0 +1,83 @@
{{ $paginator := .paginator }}
<div class="pagination">
{{ if $paginator.HasPrev }}
<a class="page-link" href="{{ $paginator.Prev.URL }}">
<div class="page-item">< Prev</div>
</a>
{{ else }}
<div class="page-item disabled">< Prev</div>
{{ end }}
{{/* If the number of pagers is more than 5, use `...` to skip some pages */}}
{{ if (le $paginator.TotalPages 5) }}
{{ $current_num := $paginator.PageNumber }}
{{ range $i, $pager := $paginator.Pagers }}
{{ if (eq $current_num $pager.PageNumber) }}
<div class="page-item active">{{ $pager.PageNumber }}</div>
{{ else }}
<a class="page-link" href="{{ $pager.URL }}"><div class="page-item">{{ $pager.PageNumber }}</div></a>
{{ end }}
{{ end }}
{{ else }}
{{ $first_page_num := 1 }}
{{ $second_page_num := 2 }}
{{ $last_page_num := $paginator.TotalPages }}
{{ $second_last_page_num := (add $paginator.TotalPages -1) }}
{{ $third_last_page_num := (add $paginator.TotalPages -2) }}
{{ $current_num := $paginator.PageNumber }}
{{/* place 1 */}}
{{ if (eq $current_num $first_page_num) }}
<div class="page-item active">{{ $current_num }}</div>
{{ else }}
<a class="page-link" href="{{ $paginator.First.URL }}"><div class="page-item">1</div></a>
{{ end }}
{{/* place 2 */}}
{{ if (eq $current_num $second_page_num) }}
<div class="page-item active">{{ $current_num }}</div>
{{ else if (le $current_num 3)}}
<a class="page-link" href="{{ $paginator.First.Next.URL }}"><div class="page-item">{{ $second_page_num }}</div></a>
{{ else }}
<div class="page-item">...</div>
{{ end }}
{{/* place 3 */}}
{{ if (le $current_num $second_page_num)}}
<a class="page-link" href="{{ $paginator.First.Next.Next.URL }}"><div class="page-item">3</div></a>
{{ else if (ge $current_num $second_last_page_num) }}
<a class="page-link" href="{{ $paginator.Last.Prev.Prev.URL }}"><div class="page-item">{{ $third_last_page_num }}</div></a>
{{ else }}
<div class="page-item active">{{ $current_num }}</div>
{{ end }}
{{/* place 4 */}}
{{ if (eq $current_num $second_last_page_num) }}
<div class="page-item active">{{ $current_num }}</div>
{{ else if (ge $current_num $third_last_page_num) }}
<a class="page-link" href="{{ $paginator.Last.Prev.URL }}"><div class="page-item">{{ $second_last_page_num }}</div></a>
{{ else }}
<div class="page-item">...</div>
{{ end }}
{{/* place 5 */}}
{{ if (eq $current_num $last_page_num) }}
<div class="page-item active">{{ $current_num }}</div>
{{ else }}
<a class="page-link" href="{{ $paginator.Last.URL }}"><div class="page-item">{{ $last_page_num }}</div></a>
{{ end }}
{{ end }}
{{ if $paginator.HasNext }}
<a class="page-link" href="{{ $paginator.Next.URL }}">
<div class="page-item">Next ></div>
</a>
{{ else }}
<div class="page-item disabled">Next ></div>
{{ end }}
</div>