Add pagination
This commit is contained in:
parent
83b9fd18ee
commit
967d8ae4e6
|
@ -1,29 +1,36 @@
|
||||||
{{ define "main" -}}
|
{{ define "main" -}}
|
||||||
<div class="posts">
|
<div class="posts">
|
||||||
{{ range .Site.RegularPages -}}
|
{{- $regularPages := where .Site.RegularPages "Type" "in" .Site.Params.MainSections -}}
|
||||||
{{ if and (or (eq .Type "post") (eq .Type "article")) (or (not (isset .Params "Hidden")) (eq .Params.Hidden false)) -}}
|
{{- $pagesNotHidden := where $regularPages ".Params.hidden" "==" false -}}
|
||||||
<article class="post">
|
{{- $pagesHiddenUnset := where $regularPages ".Params.hidden" "==" nil -}}
|
||||||
<h1 class="post-title">
|
|
||||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class="post-date">
|
{{- $pages := $pagesNotHidden | union $pagesHiddenUnset -}}
|
||||||
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> · {{ .ReadingTime }} min read
|
{{- $paginator := .Paginate $pages -}}
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ if .Description }}
|
{{ range $paginator.Pages }}
|
||||||
{{ .Description }}
|
<article class="post">
|
||||||
{{ else }}
|
<h1 class="post-title">
|
||||||
{{ .Summary }}
|
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||||
{{ end }}
|
</h1>
|
||||||
|
|
||||||
{{ if .Truncated }}
|
<div class="post-date">
|
||||||
<div class="read-more-link">
|
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> · {{ .ReadingTime }} min read
|
||||||
<a href="{{ .RelPermalink }}">Read More</a>
|
</div>
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ if .Description }}
|
||||||
</article>
|
{{ .Description }}
|
||||||
|
{{ else }}
|
||||||
|
{{ .Summary }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .Truncated }}
|
||||||
|
<div class="read-more-link">
|
||||||
|
<a href="{{ .RelPermalink }}">Read More</a>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</article>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- end }}
|
</div>
|
||||||
</div>
|
|
||||||
|
{{ template "_internal/pagination.html" . }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
@ -67,6 +67,10 @@ html {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding-left: 18rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar links */
|
/* Sidebar links */
|
||||||
|
@ -206,3 +210,66 @@ ul.posts {
|
||||||
.social-icons a:focus {
|
.social-icons a:focus {
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li a {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #49757a;
|
||||||
|
border: 1px solid #49757a;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li a:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(67, 118, 122, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.active a {
|
||||||
|
color: #fff;
|
||||||
|
background: #49757a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li.disabled a {
|
||||||
|
color: rgba(67, 118, 122, 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li:first-child a {
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination li:last-child a {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue