diff options
author | Varun A P <8411309+apvarun@users.noreply.github.com> | 2021-06-19 14:28:30 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-19 14:28:30 +0300 |
commit | 1e07be1133c51a6525495c4f354d69ea497da646 (patch) | |
tree | d99ba74eb3f0fa3183a0cdced7db770e7ea5e308 | |
parent | fb025bee7617a5a8579d7535ff3ee73b834b5db6 (diff) | |
parent | 299bd9c78b288854344396e7170bc985e5230048 (diff) |
Merge pull request #14 from apvarun/paginationv1.2.0
Pagination
-rw-r--r-- | exampleSite/config.toml | 4 | ||||
-rw-r--r-- | layouts/_default/section.html | 19 | ||||
-rw-r--r-- | layouts/index.html | 46 | ||||
-rw-r--r-- | layouts/partials/footer.html | 12 | ||||
-rw-r--r-- | layouts/partials/header.html | 4 | ||||
-rw-r--r-- | layouts/partials/no-pagination.html | 31 | ||||
-rw-r--r-- | layouts/partials/pagination.html | 57 |
7 files changed, 132 insertions, 41 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a9fafb0..3228fd1 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -14,6 +14,10 @@ pluralizelisttitles = false description = "Minimal, one page, theme for showcasing your work" message = "" hideAutoMenu = false + + # Pagination options + paginate = 3 + multipage = true [[menu.main]] name = "External" diff --git a/layouts/_default/section.html b/layouts/_default/section.html new file mode 100644 index 0000000..45253a7 --- /dev/null +++ b/layouts/_default/section.html @@ -0,0 +1,19 @@ +{{ define "main" }} + +<section class="text-gray-700 body-font"> + <div class="container px-5 py-8 mx-auto"> + {{- partial "custom-message.html" . -}} + + + {{ .Scratch.Set "pages" .Paginator.Pages }} + + {{ if eq .Site.Params.multipage true }} + {{- partial "pagination.html" . -}} + {{ else }} + {{- partial "no-pagination.html" . -}} + {{ end }} + + </div> +</section> + +{{ end }}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index a5e21fb..7963274 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,44 +3,16 @@ <section class="text-gray-700 body-font"> <div class="container px-5 py-8 mx-auto"> {{- partial "custom-message.html" . -}} + + {{ .Scratch.Set "pages" .Site.Pages }} + + {{ if eq .Site.Params.multipage true }} + {{- partial "pagination.html" . -}} + {{ else }} + {{- partial "no-pagination.html" . -}} + {{ end }} - <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4"> - {{ range where .Site.Pages "Kind" "page" }} - {{ if ne .Params.Exclude true }} - <a - target="_blank" - rel="noopener" - href="{{ .Params.Link }}" - 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 }}" - > - <div class="rounded-lg h-64 overflow-hidden relative"> - {{ if (or .Params.Image .CurrentSection.Params.Image) }} - <img - alt="{{ .Title }}" - class="object-cover object-center h-full w-full" - src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" - /> - {{ end }} - <span - class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl" - >{{ title .Section }}</span - > - <h2 - 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" - > - {{ .Title }} - </h2> - <p - class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0" - > - {{ .Params.Subtitle }} - </p> - </div> - </a> - {{ end }} - {{ end }} - </div> </div> </section> -{{ end }} +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 6d8475a..39d8c7f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -84,6 +84,12 @@ <script> const allTypes = ["all", {{ range .Site.Sections }}"{{lower .Title}}",{{ end }}]; const filter = (event, type) => { + const isMultiPage = !!document.querySelector('nav.multipage'); + + if (isMultiPage) { + return; + } + const isActive = event.target.classList.contains("active"); showAll(); @@ -92,7 +98,7 @@ event.target.classList.add("active"); if (type !== "other") { document - .querySelectorAll(`.${type}`) + .querySelectorAll(`nav:not(.multipage) .${type}`) .forEach((item) => item.classList.remove("hide")); } else { document @@ -107,10 +113,10 @@ const showAll = () => { allTypes.forEach((type) => { document - .querySelectorAll(`.${type}`) + .querySelectorAll(`nav:not(.multipage) .${type}`) .forEach((item) => item.classList.remove("hide")); document - .querySelectorAll(`.filter-${type}`) + .querySelectorAll(`nav:not(.multipage) .filter-${type}`) .forEach((filterItem) => filterItem.classList.remove("active")); }); }; diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ed022a9..52072e8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -9,16 +9,18 @@ {{- partial "logo.html" . -}} </a> <nav - class="md:ml-auto flex flex-wrap items-center text-base justify-center" + class="md:ml-auto flex flex-wrap items-center text-base justify-center {{ if .Site.Params.multipage }} multipage {{ end }}" > {{ if and (eq .Site.Params.hideAutoMenu false) (eq $.IsNode true ) }} <a class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all" + href="{{ if .Site.Params.multipage }}/{{ else }}#{{ end }}" >All</a > {{ range where .Site.Sections ".Params.private" "!=" true }} <a class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}" + href="{{ if .Site.Params.multipage }}{{ .Permalink }}{{ else }}#{{ end }}" >{{.Title}}</a > {{ end }} diff --git a/layouts/partials/no-pagination.html b/layouts/partials/no-pagination.html new file mode 100644 index 0000000..a375ddc --- /dev/null +++ b/layouts/partials/no-pagination.html @@ -0,0 +1,31 @@ +{{ $pagelist := $.Scratch.Get "pages" }} +{{ if $pagelist }} +<div> + {{ $pages := where $pagelist "Kind" "page" }} + + <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4"> + {{ range where $pages ".Params.exclude" "!=" "true" }} + <a target="_blank" rel="noopener" href="{{ .Params.Link }}" + 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 }}"> + <div class="rounded-lg h-64 overflow-hidden relative"> + {{ if (or .Params.Image .CurrentSection.Params.Image) }} + <img alt="{{ .Title }}" class="object-cover object-center h-full w-full" + src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" /> + {{ end }} + <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{ + title .Section }}</span> + <h2 + 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"> + {{ .Title }} + </h2> + <p + class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"> + {{ .Params.Subtitle }} + </p> + </div> + </a> + {{ end }} + </div> + +</div> +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..5575f13 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,57 @@ +{{ $pagelist := $.Scratch.Get "pages" }} +{{ if $pagelist }} +<div> + {{ $pages := where $pagelist "Kind" "page" }} + + {{ $paginator := .Paginate (where $pages ".Params.exclude" "!=" "true") .Site.Params.paginate }} + <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4"> + {{ range $paginator.Pages }} + <a target="_blank" rel="noopener" href="{{ .Params.Link }}" + 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 }}"> + <div class="rounded-lg h-64 overflow-hidden relative"> + {{ if (or .Params.Image .CurrentSection.Params.Image) }} + <img alt="{{ .Title }}" class="object-cover object-center h-full w-full" + src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" /> + {{ end }} + <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{ + title .Section }}</span> + <h2 + 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"> + {{ .Title }} + </h2> + <p + class="text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"> + {{ .Params.Subtitle }} + </p> + </div> + </a> + {{ end }} + </div> + + + {{ if gt $paginator.TotalPages 1 }} + <nav aria-label="Page navigation"> + <ul class="flex gap-2 justify-center mt-2"> + {{ if $paginator.HasPrev }} + <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" + href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">« Prev</a></li> + {{ end }} + {{ range $paginator.Pagers }} + {{ if eq . $paginator }} + <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" + class="page-link">{{ .PageNumber }}</a></li> + {{ else }} + <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" + class="page-link">{{ .PageNumber }}</a></li> + {{ end }} + {{ end }} + + {{ if $paginator.HasNext }} + <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" + href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next »</a></li> + {{ end }} + </ul> + </nav> + {{ end }} +</div> +{{ end }}
\ No newline at end of file |