Pagination with multipage sections screen

5 files changed, 108 insertions, 124 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 422954c..3228fd1 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -14,7 +14,10 @@ pluralizelisttitles = false
   description = "Minimal, one page, theme for showcasing your work"
   message = ""
   hideAutoMenu = false
-  paginate = 2
+  
+  # Pagination options
+  paginate = 3
+  multipage = true
 
 [[menu.main]]
   name = "External"
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 8a5f090..45253a7 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -4,69 +4,16 @@
   <div class="container px-5 py-8 mx-auto">
     {{- partial "custom-message.html" . -}}
 
-    <div>
-      {{ $pages  := where .Paginator.Pages "Kind" "page" }}
+        
+    {{ .Scratch.Set "pages" .Paginator.Pages }}
 
-      {{ $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">&laquo; 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 &raquo;</a></li>
-          {{ end }}
-        </ul>
-      </nav>
-      {{ end }}
-    </div>
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
 
   </div>
 </section>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 641675c..7963274 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,70 +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 }}
 
-    <div>
-      {{ $pages  := where .Site.Pages "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">&laquo; 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 &raquo;</a></li>
-          {{ end }}
-        </ul>
-      </nav>
-      {{ end }}
-    </div>
+    {{ if eq .Site.Params.multipage true }}
+    {{- partial "pagination.html" . -}}
+    {{ else }}
+    {{- partial "no-pagination.html" . -}}
+    {{ end }}
 
   </div>
 </section>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
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">&laquo; 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 &raquo;</a></li>
+      {{ end }}
+    </ul>
+  </nav>
+  {{ end }}
+</div>
+{{ end }}
\ No newline at end of file