Paginate post list

qgis · Oct 24, 2024 · 039d59d · 039d59d
1 parent c473bb7
commit 039d59d
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/config.toml b/config.toml
@@ -4,7 +4,7 @@ title = 'QGIS Planet Website'
 theme = 'hugo-bulma-blocks-theme'
 # Default pagination.
 # Can override this when needed e.g. {{ range (.Paginator 5).Pages }}
-paginate = 50
+paginate = 10
 
 # See https://mertbakir.gitlab.io/hugo/syntax-highlighting-in-hugo/
 pygmentsUseClasses = true

diff --git a/themes/hugo-bulma-blocks-theme/assets/sass/style.sass b/themes/hugo-bulma-blocks-theme/assets/sass/style.sass
@@ -125,4 +125,11 @@ code
 .post-container
   background-color: #ecf1f4b0
   border-radius: 10px
-  // color: #4d6370 !important
+  // color: #4d6370 !important
+
+.pagination
+    position: sticky
+    bottom: 0
+    background: #ffffffeb
+    padding: 20px 0
+    z-index: 1
diff --git a/themes/hugo-bulma-blocks-theme/layouts/_default/search.html b/themes/hugo-bulma-blocks-theme/layouts/_default/search.html
@@ -2,6 +2,7 @@
 {{ partial "menu.html" . }}
 {{ partial "banner.html" . }}
 {{ partial "contextmenu.html" . }}
+{{ partial "tags-modal.html" . }}
 
 <section class="section">
     <div class="container content search-cantainer" >

diff --git a/themes/hugo-bulma-blocks-theme/layouts/partials/pagination.html b/themes/hugo-bulma-blocks-theme/layouts/partials/pagination.html
@@ -1,14 +1,21 @@
 {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
-
-{{ if .Paginator.HasPrev }}
-<a href="{{.Paginator.Prev.URL}}" class="">
-  <i class=""></i>&nbsp;Newer
-</a>
-{{ end }}
-<span class="">Page {{.Paginator.PageNumber}} of {{.Paginator.TotalPages}}</span>
-{{ if .Paginator.HasNext }}
-<a href="{{.Paginator.Next.URL}}" class="">
-  Older&nbsp;<i class=""></i>
-</a>
-{{ end }}
+<nav class="pagination is-centered m-3" role="navigation" aria-label="pagination">
+  {{ if .Paginator.HasPrev }}
+  <a href="{{.Paginator.First.URL}}" class="pagination-previous">
+    <span class="icon"><i class="fas fa-angle-double-left"></i></span>&nbsp;First
+  </a>
+  <a href="{{.Paginator.Prev.URL}}" class="pagination-previous">
+    <span class="icon"><i class="fas fa-angle-left"></i></span>&nbsp;Previous
+  </a>
+  {{ end }}
+  <span class="pagination-info button">Page {{.Paginator.PageNumber}} of {{.Paginator.TotalPages}}</span>
+  {{ if .Paginator.HasNext }}
+  <a href="{{.Paginator.Next.URL}}" class="pagination-next">
+    Next&nbsp;<span class="icon"><i class="fas fa-angle-right"></i></span>
+  </a>
+  <a href="{{.Paginator.Last.URL}}" class="pagination-next">
+    Last&nbsp;<span class="icon"><i class="fas fa-angle-double-right"></i></span>
+  </a>
+  {{ end }}
+</nav>
 {{ end }}
diff --git a/themes/hugo-bulma-blocks-theme/layouts/partials/posts-list.html b/themes/hugo-bulma-blocks-theme/layouts/partials/posts-list.html
@@ -53,7 +53,8 @@ <h1 class="title">
                 {{ $pages := .Scratch.Get "pages" }}
 
 
-                {{ range $pages }}
+                {{ $paginator := .Paginate $pages }}
+                {{ range $paginator.Pages }}
                     <div class="column is-12">
                         <div class="container rich">
                             <div class="cont coloring-1">
@@ -77,9 +78,9 @@ <h2 class="title is-4">
                                     {{ if gt (len $tags) 0 }}
                                         under
                                         {{ range $tags }}
-                                                <span class="tag is-success is-light mb-1">
-                                                    <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a>
-                                                </span>
+                                            <span class="tag is-success is-light mb-1">
+                                                <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a>
+                                            </span>
                                         {{ end }}
                                     {{ end }}
 
@@ -92,8 +93,9 @@ <h2 class="title is-4">
                         </div>
                         <!-- <div class="post-container p-5"></div> -->
                     </div>
-
                 {{ end }}
+
+                {{ partial "pagination.html" . }}
             </div>
         </div>  
     </div>