zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add pagination style

Browse source
This commit is contained in:
FarseaSH 2021-09-02 12:45:58 +08:00
parent 3d1a633b70
commit 4dfeb93202
3 changed files with 58 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
layouts/_default/baseof.html
View file

@ -11,12 +11,12 @@
{{ end }} {{ end }}
<!-- Pagination --> <!-- Pagination -->
<nav aria-label="Page navigation .pagination-lg"> <div class="center">
<ul class="pagination justify-content-center"> <div class="pagination">
{{ block "pagination" . }} {{ block "pagination" . }}
{{ end }} {{ end }}
</ul> </div>
</nav> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</div> </div>

25
layouts/index.html
View file

@ -11,31 +11,28 @@
{{ define "pagination" }} {{ define "pagination" }}
{{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }} {{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
{{ if $paginator.HasPrev }} {{ if $paginator.HasPrev }}
<li class="page-item">
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a> <a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
</li> <div class="page-item">Previous</div>
</a>
{{ else }} {{ else }}
<li class="page-item disabled"> <div class="page-item disabled">Previous</div>
<a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
</li>
{{ end }} {{ end }}
{{ $current_num := $paginator.PageNumber }} {{ $current_num := $paginator.PageNumber }}
{{ range (seq 1 $paginator.TotalPages) }} {{ range (seq 1 $paginator.TotalPages) }}
{{ if (eq $current_num .)}} {{ if (eq $current_num .)}}
<li class="page-item active"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li> <div class="page-item active">{{.}}</div>
{{ else }} {{ else }}
<li class="page-item"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li> <a class="page-link" href="{{$.Site.BaseURL}}/{{.}}"><div class="page-item">{{.}}</div></a>
{{ end }} {{ end }}
{{end}} {{end}}
{{ if $paginator.HasNext }} {{ if $paginator.HasNext }}
<li class="page-item"> <a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a> <div class="page-item">Next</div>
</li> </a>
{{ else }} {{ else }}
<li class="page-item disabled"> <div class="page-item disabled">Next</div>
<a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
</li>
{{ end }} {{ end }}
{{ end }} {{ end }}

43
static/css/style.css
View file

@ -35,6 +35,49 @@ p{
/* END - top cover part */ /* END - top cover part */
/* START - pagination */
.center{
display: flex;
justify-content: center;
}
.pagination{
display: flex;
margin-top: 20px;
margin-bottom: 30px;
}
.pagination a{
color: #337cf6;
text-decoration: none;
}
.page-item{
border: #80808050;
border-style: solid;
border-width: 0.5px;
border-radius: 2%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.page-link .page-item:hover{
background-color: #eaecef;
color: #2157ad;
}
.page-item.active{
background-color: #337cf6;
color: #ffffff;
}
.page-item.disabled{
color:rgb(108, 117, 125)
}
/* END - pagination */
.page{ .page{
max-width: 1150px; max-width: 1150px;
margin: auto; margin: auto;