Add previous and next page links

Fix #33
This commit is contained in:
BBaoVanC 2021-11-14 00:41:49 -06:00
parent f6140abc26
commit e67bd58ceb
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 77 additions and 0 deletions

View File

@ -411,6 +411,53 @@ li.disabled > .page-link:hover {
/* Previous and next page */
.prevnext {
display: flex;
margin: 20px 0;
}
.prevnext > * {
flex: 1;
white-space: nowrap;
overflow: hidden;
display: flex;
flex-direction: column;
color: inherit;
background-color: #222;
padding: 8px 16px;
}
.prevnext > a:hover {
background-color: #333;
text-decoration: none;
}
.prevnext > .prev {
text-align: left;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.prevnext > .next {
text-align: right;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.prevnext .prev-caption,
.prevnext .next-caption {
opacity: 65%;
}
.prevnext .prev-post,
.prevnext .next-post {
overflow: hidden;
text-overflow: ellipsis;
}
/* Print compatibility */ /* Print compatibility */
@media print { @media print {
.top, .top,

View File

@ -52,6 +52,36 @@
</div> </div>
{{ end }} {{ end }}
{{ if or .NextInSection .PrevInSection }}
<div class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
&larr; Newer
</div>
<div class="prev-post">
{{ .Title }}
</div>
</a>
{{ else }}
<div class="prev"></div>
{{ end }}
{{ with .PrevInSection }}
<a class="next" href="{{ .Permalink }}">
<div class="next-caption">
Older &rarr;
</div>
<div class="next-post">
{{ .Title }}
</div>
</a>
{{ else }}
<div class="next"></div>
{{ end }}
</div>
{{ end }}
{{ if .Params.comments }} {{ if .Params.comments }}
{{ partial "comments.html" . }} {{ partial "comments.html" . }}
{{ end }} {{ end }}