Skip to content

Commit 1e07be1

Browse files
apvarunapvarun
authored
Merge pull request #14 from apvarun/pagination
Pagination
2 parents fb025be + 299bd9c commit 1e07be1

File tree

7 files changed

+132
-41
lines changed

7 files changed

+132
-41
lines changed

‎exampleSite/config.toml

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ pluralizelisttitles = false
1414
description = "Minimal, one page, theme for showcasing your work"
1515
message = ""
1616
hideAutoMenu = false
17+
18+
# Pagination options
19+
paginate = 3
20+
multipage = true
1721

1822
[[menu.main]]
1923
name = "External"

‎layouts/_default/section.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{{ define "main" }}
2+
3+
<section class="text-gray-700 body-font">
4+
<div class="container px-5 py-8 mx-auto">
5+
{{- partial "custom-message.html" . -}}
6+
7+
8+
{{ .Scratch.Set "pages" .Paginator.Pages }}
9+
10+
{{ if eq .Site.Params.multipage true }}
11+
{{- partial "pagination.html" . -}}
12+
{{ else }}
13+
{{- partial "no-pagination.html" . -}}
14+
{{ end }}
15+
16+
</div>
17+
</section>
18+
19+
{{ end }}

‎layouts/index.html

+9-37
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,16 @@
33
<section class="text-gray-700 body-font">
44
<div class="container px-5 py-8 mx-auto">
55
{{- partial "custom-message.html" . -}}
6+
7+
{{ .Scratch.Set "pages" .Site.Pages }}
8+
9+
{{ if eq .Site.Params.multipage true }}
10+
{{- partial "pagination.html" . -}}
11+
{{ else }}
12+
{{- partial "no-pagination.html" . -}}
13+
{{ end }}
614

7-
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
8-
{{ range where .Site.Pages "Kind" "page" }}
9-
{{ if ne .Params.Exclude true }}
10-
<a
11-
target="_blank"
12-
rel="noopener"
13-
href="{{ .Params.Link }}"
14-
class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}"
15-
>
16-
<div class="rounded-lg h-64 overflow-hidden relative">
17-
{{ if (or .Params.Image .CurrentSection.Params.Image) }}
18-
<img
19-
alt="{{ .Title }}"
20-
class="object-cover object-center h-full w-full"
21-
src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
22-
/>
23-
{{ end }}
24-
<span
25-
class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
26-
>{{ title .Section }}</span
27-
>
28-
<h2
29-
class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
30-
>
31-
{{ .Title }}
32-
</h2>
33-
<p
34-
class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
35-
>
36-
{{ .Params.Subtitle }}
37-
</p>
38-
</div>
39-
</a>
40-
{{ end }}
41-
{{ end }}
42-
</div>
4315
</div>
4416
</section>
4517

46-
{{ end }}
18+
{{ end }}

‎layouts/partials/footer.html

+9-3
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,12 @@
8484
<script>
8585
const allTypes = ["all", {{ range .Site.Sections }}"{{lower .Title}}",{{ end }}];
8686
const filter = (event, type) => {
87+
const isMultiPage = !!document.querySelector('nav.multipage');
88+
89+
if (isMultiPage) {
90+
return;
91+
}
92+
8793
const isActive = event.target.classList.contains("active");
8894

8995
showAll();
@@ -92,7 +98,7 @@
9298
event.target.classList.add("active");
9399
if (type !== "other") {
94100
document
95-
.querySelectorAll(`.${type}`)
101+
.querySelectorAll(`nav:not(.multipage) .${type}`)
96102
.forEach((item) => item.classList.remove("hide"));
97103
} else {
98104
document
@@ -107,10 +113,10 @@
107113
const showAll = () => {
108114
allTypes.forEach((type) => {
109115
document
110-
.querySelectorAll(`.${type}`)
116+
.querySelectorAll(`nav:not(.multipage) .${type}`)
111117
.forEach((item) => item.classList.remove("hide"));
112118
document
113-
.querySelectorAll(`.filter-${type}`)
119+
.querySelectorAll(`nav:not(.multipage) .filter-${type}`)
114120
.forEach((filterItem) => filterItem.classList.remove("active"));
115121
});
116122
};

‎layouts/partials/header.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,18 @@
99
{{- partial "logo.html" . -}}
1010
</a>
1111
<nav
12-
class="md:ml-auto flex flex-wrap items-center text-base justify-center"
12+
class="md:ml-auto flex flex-wrap items-center text-base justify-center {{ if .Site.Params.multipage }} multipage {{ end }}"
1313
>
1414
{{ if and (eq .Site.Params.hideAutoMenu false) (eq $.IsNode true ) }}
1515
<a
1616
class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all"
17+
href="{{ if .Site.Params.multipage }}/{{ else }}#{{ end }}"
1718
>All</a
1819
>
1920
{{ range where .Site.Sections ".Params.private" "!=" true }}
2021
<a
2122
class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}"
23+
href="{{ if .Site.Params.multipage }}{{ .Permalink }}{{ else }}#{{ end }}"
2224
>{{.Title}}</a
2325
>
2426
{{ end }}

‎layouts/partials/no-pagination.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{{ $pagelist := $.Scratch.Get "pages" }}
2+
{{ if $pagelist }}
3+
<div>
4+
{{ $pages := where $pagelist "Kind" "page" }}
5+
6+
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
7+
{{ range where $pages ".Params.exclude" "!=" "true" }}
8+
<a target="_blank" rel="noopener" href="{{ .Params.Link }}"
9+
class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}">
10+
<div class="rounded-lg h-64 overflow-hidden relative">
11+
{{ if (or .Params.Image .CurrentSection.Params.Image) }}
12+
<img alt="{{ .Title }}" class="object-cover object-center h-full w-full"
13+
src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
14+
{{ end }}
15+
<span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{
16+
title .Section }}</span>
17+
<h2
18+
class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0">
19+
{{ .Title }}
20+
</h2>
21+
<p
22+
class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
23+
{{ .Params.Subtitle }}
24+
</p>
25+
</div>
26+
</a>
27+
{{ end }}
28+
</div>
29+
30+
</div>
31+
{{ end }}

‎layouts/partials/pagination.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{{ $pagelist := $.Scratch.Get "pages" }}
2+
{{ if $pagelist }}
3+
<div>
4+
{{ $pages := where $pagelist "Kind" "page" }}
5+
6+
{{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }}
7+
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
8+
{{ range $paginator.Pages }}
9+
<a target="_blank" rel="noopener" href="{{ .Params.Link }}"
10+
class="card p-4 md:w-1/3 sm:mb-4 mb-6 hover:shadow-xl hover:bg-gray-400 transition duration-200 ease-in rounded-lg {{ lower .Section }}">
11+
<div class="rounded-lg h-64 overflow-hidden relative">
12+
{{ if (or .Params.Image .CurrentSection.Params.Image) }}
13+
<img alt="{{ .Title }}" class="object-cover object-center h-full w-full"
14+
src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
15+
{{ end }}
16+
<span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{
17+
title .Section }}</span>
18+
<h2
19+
class="text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0">
20+
{{ .Title }}
21+
</h2>
22+
<p
23+
class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
24+
{{ .Params.Subtitle }}
25+
</p>
26+
</div>
27+
</a>
28+
{{ end }}
29+
</div>
30+
31+
32+
{{ if gt $paginator.TotalPages 1 }}
33+
<nav aria-label="Page navigation">
34+
<ul class="flex gap-2 justify-center mt-2">
35+
{{ if $paginator.HasPrev }}
36+
<li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1"
37+
href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">&laquo; Prev</a></li>
38+
{{ end }}
39+
{{ range $paginator.Pagers }}
40+
{{ if eq . $paginator }}
41+
<li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}"
42+
class="page-link">{{ .PageNumber }}</a></li>
43+
{{ else }}
44+
<li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}"
45+
class="page-link">{{ .PageNumber }}</a></li>
46+
{{ end }}
47+
{{ end }}
48+
49+
{{ if $paginator.HasNext }}
50+
<li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1"
51+
href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next &raquo;</a></li>
52+
{{ end }}
53+
</ul>
54+
</nav>
55+
{{ end }}
56+
</div>
57+
{{ end }}

0 commit comments

Comments
 (0)