Navigation

blog-index.twig

@@ -9,7 +9,7 @@
     {% endif %}
     </h1>
     <ul class="items">
-        {% for page in pages("blog", depth=null)|sort_by("time")|reverse if not page.hidden %}
+        {% for page in paged_pages|sort_by("time")|reverse if not page.hidden %}
             {% if not tag or tag in page.meta.tags %}
                 <li>
                     <article class="wrap">
@@ -37,4 +37,20 @@
             {% endif %}
         {% endfor %}
     </ul>
+
+    <nav class="pagination">
+        <div class="wrap">
+            <!-- Pico pagination is in reverse order -->
+            {% if page_number != total_pages%}
+                <div class="previous">
+                    <a href="{{ next_page_url }}">← Articles précédents</a>
+                </div>
+            {% endif %}
+            {% if prev_page_url != page.url  %}
+                <div class="next">
+                    <a href="{{ prev_page_url }}">Articles suivants →</a>
+                </div>
+            {% endif %}
+        </div>
+    </nav>
 {% endblock %}

blog-post.twig

@@ -23,13 +23,13 @@
         <p></p>
         <ul style="list-style:none;box-sizing:border-box">
             {% if 'blog' in previous_page.url %}
-                <li style="float:left;padding:15px"><a href="{{previous_page.url}}">Article précédent</a></li>
+                <li style="float:left;padding:15px"><a href="{{previous_page.url}}">← Article précédent</a></li>
             {% endif %}
             {% for tag in meta.tags %}
             <li style="float:left;padding:15px"><a href="{{base_url}}/blog?tag={{tag}}">Tous les articles de la catégorie {{tag}}</a></li>
             {% endfor %}
             {% if next_page.url != meta.url %}
-                <li style="float:left;padding:15px"><a href="{{next_page.url}}">Article suivant</a></li>
+                <li style="float:left;padding:15px"><a href="{{next_page.url}}">Article suivant →</a></li>
             {% endif %}
         </ul>
     </section>