✨ feat: add previous/next article navigation (#246)

config.toml

@@ -109,6 +109,10 @@ footnote_backlinks = false
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 katex = false
 
+# Show links to previous and next articles at the bottom of posts.
+# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+show_previous_next_article_links = false
+
 # Quick navigation buttons.
 # Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy

content/blog/_index.ca.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/ca_blog.jpg"
+show_previous_next_article_links = true
 +++

content/blog/_index.es.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/es_blog.jpg"
+show_previous_next_article_links = true
 +++

content/blog/_index.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/blog.jpg"
+show_previous_next_article_links = true
 +++

content/blog/mastering-tabi-settings/index.ca.md

@@ -401,6 +401,18 @@ Activa l'índex de continguts just sota del títol i metadades de l'article amb
 
 Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la Taula de continguts](/ca/blog/toc/).
 
+### Enllaços als articles anterior i següent
+
+| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
+|   ✅   |   ✅   |      ✅       |          ✅          |         ❌          |
+
+Mostra enllaços als articles anterior i següent a la part inferior dels posts. Es veu així:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enllaços als articles anterior i següent", full_width=true) }}
+
+Per activar aquesta funció, estableix `show_previous_next_article_links = true`.
+
 ### Enllaços de retorn a les notes a peu de pàgina
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

content/blog/mastering-tabi-settings/index.es.md

@@ -399,6 +399,18 @@ Habilita el índice de contenidos justo debajo del título y metadatos del artí
 
 Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la Tabla de contenido](/es/blog/toc/).
 
+### Enlace a los artículos anterior y siguiente
+
+| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
+|   ✅   |   ✅   |      ✅       |         ✅         |         ❌         |
+
+Muestra enlaces a los artículos anterior y siguiente en la parte inferior de los posts. Se ve así:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enlaces a los artículos anterior y siguiente", full_width=true) }}
+
+Para activar esta función, configura `show_previous_next_article_links = true`.
+
 ### Enlaces de retorno en notas al pie
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

content/blog/mastering-tabi-settings/index.md

@@ -403,6 +403,18 @@ Enable the table of contents right below the post's title and metadata with `toc
 
 Read more about the table of contents and how to customise it by reading [the docs](/blog/toc/).
 
+### Previous and Next Article Links
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
+
+Displays links to the previous and next articles at the bottom of posts. It looks like this:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp" alt="Previous and next article links", full_width=true) }}
+
+To activate this feature, set `show_previous_next_article_links = true`.
+
 ### Footnote Backlinks
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

sass/parts/_misc.scss

@@ -167,3 +167,28 @@ hr {
 details summary {
     cursor: pointer;
 }
+
+.article-navigation {
+    display: flex;
+    margin-top: 2rem;
+    border-top: var(--divider-color) solid 0.5px;
+    padding-top: 2rem;
+
+    div:first-child {
+        flex: 1;
+        text-align: left;
+    }
+
+    div:last-child {
+        flex: 1;
+        text-align: right;
+    }
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+
+        div {
+            text-align: center !important;
+        }
+    }
+}

templates/page.html

@@ -22,6 +22,7 @@
     "show_reading_time",
     "show_remote_changes",
     "toc",
+    "show_previous_next_article_links",
 ] %}
 
 <table>
@@ -129,6 +130,23 @@
             {{ throw(message="ERROR: Multiple comment systems have been enabled for the same page. Check your config.toml and individual page settings to ensure only one comment system is activated at a time.") }}
         {% endif %}
 
+        {% if macros_settings::evaluate_setting_priority(setting="show_previous_next_article_links", page=page, default_global_value=true) == "true" %}
+            {%- if page.lower or page.higher -%}
+            <nav class="full-width article-navigation">
+                <div>
+                {%- if page.lower -%}
+                <a href="{{ page.lower.permalink | safe }}">&#8249; {{ page.lower.title | truncate(length=100) }}</a>
+                {%- endif -%}
+                </div>
+                <div>
+                {%- if page.higher -%}
+                <a href="{{ page.higher.permalink | safe }}"> {{ page.higher.title | truncate(length=100) }} &#8250;</a>
+                {%- endif -%}
+                </div>
+            </nav>
+            {%- endif -%}
+        {%- endif -%}
+
         {% if comment_system %}
             {% include "partials/comments.html" %}
         {% endif %}

theme.toml

@@ -88,6 +88,10 @@ footnote_backlinks = false
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 katex = false
 
+# Show links to previous and next articles at the bottom of posts.
+# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+show_previous_next_article_links = false
+
 # Quick navigation buttons.
 # Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy