Add pagination

config.toml

@@ -45,6 +45,10 @@ external_links_no_referrer = true
 # typographic form). For example, `...` into `…`, `"quote"` into `“curly”`, etc.
 smart_punctuation = true
 
+[translations]
+next_page = "Page suivante"
+previous_page = "Page précédente"
+
 [extra]
 address = [
   "Zero Waste Sud Grand Paris",

content/actualite/_index.md

@@ -3,5 +3,10 @@ title = "Actualité"
 weight = 2
 template = "actualite.html"
 page_template = "post.html"
+paginate_by = 9
 sort_by = "date"
+
+[extra]
+# Number of posts per row.
+items_per_row = 3
 +++

sass/css/_actualite.scss

@@ -58,3 +58,8 @@
     margin-top: 50px;
   }
 }
+
+.pagination {
+  text-align: center;
+  margin-bottom: 3rem;
+}

templates/actualite.html

@@ -10,7 +10,8 @@ <h2>{{ section.title }}</h2>
     </div>
     <hr class="separator-dark">
     <div class="row">
-    {% for post in section.pages %}
+    {% for post in paginator.pages %}
+    {% set row_index = loop.index % section.extra.items_per_row %}
       <article class="col">
         <div class="post-meta">
           <div class="post-thumbnail">
@@ -31,8 +32,38 @@ <h4 class="mt-2">{{ post.title }}</h4>
         </div>
         {% endif %}
       </article>
+    {% if row_index == 0 %}
+    </div>
+    <div class="row">
+    {% endif %}
     {% endfor %}
     </div>
   </div>
 </section>
+
+<nav class="pagination">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        {% if paginator.previous %}
+        <span class="pagination-item older">
+          <a href="{{ paginator.previous }}">← {{ trans(key="previous_page") }}</a>
+        </span>
+        {% else %}
+        <span class="pagination-item older">← {{ trans(key="previous_page") }}</span>
+        {% endif %}
+      </div>
+
+      <div class="col">
+        {% if paginator.next %}
+        <span class="pagination-item newer">
+          <a href="{{ paginator.next }}">{{ trans(key="next_page") }} →</a>
+        </span>
+        {% else %}
+        <span class="pagination-item newer">{{ trans(key="next_page") }} →</span>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</nav>
 {% endblock content %}