feat: add paginator to blog list

This commit is contained in:
Henk Verlinde 2021-09-09 09:48:27 +02:00
parent f1fdec85de
commit a1dce26c24
3 changed files with 41 additions and 1 deletions

View File

@ -480,3 +480,36 @@ $navbar-dark-active-color: $link-color-dark;
[data-dark-mode] body .email-form .form-control:focus { [data-dark-mode] body .email-form .form-control:focus {
border: 1px solid $link-color-dark; border: 1px solid $link-color-dark;
} }
[data-dark-mode] .page-link {
color: $link-color-dark;
background-color: transparent;
border: $pagination-border-width solid $border-dark;
&:hover {
color: $body-bg-dark;
background-color: $body-color-dark;
border-color: $body-color-dark;
}
&:focus {
color: $body-bg-dark;
background-color: $body-color-dark;
}
}
[data-dark-mode] .page-item {
&.active .page-link {
color: $body-bg-dark;
@include gradient-bg($link-color-dark);
border-color: $link-color-dark;
}
&.disabled .page-link {
color: $pagination-disabled-color;
background-color: $body-overlay-dark;
border-color: $border-dark;
}
}

View File

@ -43,3 +43,7 @@ p.meta {
margin-top: 2.25rem; margin-top: 2.25rem;
font-size: $font-size-base; font-size: $font-size-base;
} }
.page-link:hover {
text-decoration: none;
}

View File

@ -5,7 +5,8 @@
<h1 class="text-center">{{ .Title }}</h1> <h1 class="text-center">{{ .Title }}</h1>
<div class="text-center">{{ .Content }}</div> <div class="text-center">{{ .Content }}</div>
<div class="card-list"> <div class="card-list">
{{ range .Data.Pages -}} {{ $paginator := .Paginate (.Data.Pages) -}}
{{ range $paginator.Pages -}}
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2> <h2 class="h3"><a class="stretched-link text-body" href="{{ .RelPermalink }}">{{ .Params.title }}</a></h2>
@ -14,6 +15,8 @@
</div> </div>
</div> </div>
{{ end -}} {{ end -}}
{{ $.Scratch.Set "paginator" true }}
{{ template "_internal/pagination.html" . }}
</div> </div>
</article> </article>
</div> </div>