mirror of
https://github.com/foo-dogsquared/hugo-theme-contentful.git
synced 2025-01-30 22:57:55 +00:00
Improve the pagination
As much as I avoid creating custom partials, it seem it is not possible with this component since it has gotten a bit bigger than I expected. The pagination component is a modified version of the internal pagination template but smarter. One of the major change is it will only apply ellipses if it has more than one page to skip. Also, it is easier to configure now that it is refactored to be one. Last but not least, it has comments. :)
This commit is contained in:
Gabriel Arazas
parent
a78ddfcac0
commit
3bfcecb51c
@ -13,6 +13,13 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
|
||||
=== Changed
|
||||
|
||||
* Change the CSS linking with https://gohugo.io/hugo-pipes/introduction/[Hugo Pipes], moving it into the assets folder.
|
||||
|
||||
* Improve the pagination partial.
|
||||
** It has been modularized and refactored for easier development when extending the theme.
|
||||
** The appearance has been revamped to be more intuitive.
|
||||
** Replaces with numbers instead of the horrible phrases (which I didn't realize is horrible) so the i18n options for those are also gone.
|
||||
** The pagination is also smarter when applying the ellipses, making sure to only skip if the difference between pages is more than one.
|
||||
|
||||
* Update the documentation with additional installations with Hugo Module.
|
||||
|
||||
|
||||
|
||||
@ -227,17 +227,40 @@ footer {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 0;
|
||||
margin: 1rem;
|
||||
font-size: 1rem;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
margin: 1.2rem 0;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.pagination > * {
|
||||
margin: 0 0.25em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
background: var(--background-light);
|
||||
color: var(--foreground-light);
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.page-link:visited {
|
||||
color: var(--foreground-light);
|
||||
}
|
||||
|
||||
.page-link--active {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.post {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
14
i18n/en.toml
14
i18n/en.toml
@ -1,17 +1,3 @@
|
||||
# Pagination
|
||||
[first_page]
|
||||
other = "Newest posts"
|
||||
|
||||
[prev_page]
|
||||
other = "Newer posts"
|
||||
|
||||
[next_page]
|
||||
other = "Older posts"
|
||||
|
||||
[last_page]
|
||||
other = "Oldest posts"
|
||||
|
||||
|
||||
# Content
|
||||
[published_by]
|
||||
other = "Authors"
|
||||
|
||||
14
i18n/tl.toml
14
i18n/tl.toml
@ -1,17 +1,3 @@
|
||||
# Pagination
|
||||
[first_page]
|
||||
other = "Unang pahina"
|
||||
|
||||
[prev_page]
|
||||
other = "Balik"
|
||||
|
||||
[next_page]
|
||||
other = "Sunod"
|
||||
|
||||
[last_page]
|
||||
other = "Huling pahina"
|
||||
|
||||
|
||||
# Content
|
||||
[published_by]
|
||||
other = "Sinulat ni"
|
||||
|
||||
@ -16,21 +16,5 @@ Otherwise, we take the pages of a section. */ -}}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
<div class="pagination">
|
||||
{{- if .Paginator.HasPrev }}
|
||||
{{- if ne .Paginator.First .Paginator.Prev -}}
|
||||
<a rel="first" href="{{ .Paginator.First.URL }}">{{ i18n "first_page" }}</a>
|
||||
{{- end }}
|
||||
|
||||
<a rel="prev" href="{{ .Paginator.Prev.URL }}">{{ i18n "prev_page" }}</a>
|
||||
{{- end }}
|
||||
|
||||
{{- if .Paginator.HasNext -}}
|
||||
<a rel="next" href="{{ .Paginator.Next.URL }}">{{ i18n "next_page" }}</a>
|
||||
|
||||
{{- if ne .Paginator.Last .Paginator.Next -}}
|
||||
<a rel="last" href="{{ .Paginator.Last.URL }}">{{ i18n "last_page" }}</a>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</div>
|
||||
{{ partial "pagination.html" (dict "Paginator" .Paginator "activeNumberOfPages" 2) }}
|
||||
{{ end }}
|
||||
|
||||
65
layouts/partials/pagination.html
Normal file
65
layouts/partials/pagination.html
Normal file
@ -0,0 +1,65 @@
|
||||
{{ $pag := .Paginator }}
|
||||
|
||||
{{- /* The minimum pages starting from the first page */ -}}
|
||||
{{ $minimumPage := .minimumPage | default 1 }}
|
||||
|
||||
{{- /* The number of pages to be shown with the active page. */ -}}
|
||||
{{ $activeNumberOfPages := .activeNumberOfPages | default 2 }}
|
||||
|
||||
{{- /* Since the active page is also included when adding the in-between pages of the active page, we need to increment it to mitigate against it. */ -}}
|
||||
{{ $midpointPages := add $activeNumberOfPages 1 }}
|
||||
|
||||
{{ if gt $pag.TotalPages 1 -}}
|
||||
<ul class="pagination">
|
||||
{{- $ellipsed := false -}}
|
||||
{{- $shouldEllipse := false -}}
|
||||
{{- range $pag.Pagers -}}
|
||||
{{ $minimumActivePage := sub $pag.PageNumber $activeNumberOfPages }}
|
||||
{{ $maximumActivePage := add $pag.PageNumber $activeNumberOfPages }}
|
||||
|
||||
{{- /* Make all of the given number of pages starting from both ends to be visible */ -}}
|
||||
{{- $showNumber := or (le .PageNumber $minimumPage) (lt (sub .TotalPages .PageNumber) $minimumPage) -}}
|
||||
|
||||
{{- /* Make all of the given number of pages between the active page number visible */ -}}
|
||||
{{- $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber $midpointPages)) (lt .PageNumber (add $pag.PageNumber $midpointPages))) -}}
|
||||
|
||||
{{- /*
|
||||
Make all of the page number that is just before/after the minimum page threshold to be visible.
|
||||
This is applied to those situations where there's only one number remaining before the end
|
||||
*/ -}}
|
||||
{{ if eq .PageNumber (sub $minimumActivePage 1) }}
|
||||
{{ $showNumber = or $showNumber (eq (sub $minimumActivePage $minimumPage) (add $pag.First.PageNumber 1)) }}
|
||||
{{ else if eq .PageNumber (add $maximumActivePage 1) }}
|
||||
{{ $showNumber = or $showNumber (eq (add $maximumActivePage 1) (sub $pag.Last.PageNumber $minimumPage)) }}
|
||||
{{ end }}
|
||||
|
||||
{{- if $showNumber -}}
|
||||
{{- $ellipsed = false -}}
|
||||
{{- $shouldEllipse = false -}}
|
||||
{{- else -}}
|
||||
{{- $shouldEllipse = not $ellipsed -}}
|
||||
{{- $ellipsed = true -}}
|
||||
{{- end -}}
|
||||
{{- if $showNumber }}
|
||||
<li class="{{ if eq . $pag }} page-link--active{{ end }}">
|
||||
<a class="page-link" href="{{ .URL }}"
|
||||
{{- if eq (sub $pag.PageNumber .PageNumber) 1 }}
|
||||
rel="prev"
|
||||
aria-label="Previous"
|
||||
{{- else if (eq (sub $pag.PageNumber .PageNumber) -1) }}
|
||||
rel="next"
|
||||
aria-label="Next"
|
||||
{{- else if (eq $pag.PageNumber .PageNumber) }}
|
||||
aria-label="Current"
|
||||
aria-current="page"
|
||||
{{- end -}}
|
||||
>{{ .PageNumber }}</a>
|
||||
</li>
|
||||
{{- else if $shouldEllipse }}
|
||||
<li class="page-item disabled">
|
||||
<span aria-hidden="true"> … </span>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
Loading…
Reference in New Issue
Block a user