✨ feat: add previous/next article navigation

welpo · Jan 4, 2024 · 6619af3 · 6619af3
1 parent 0aef23b
commit 6619af3
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 0 deletions.
diff --git a/config.toml b/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

diff --git a/content/blog/_index.ca.md b/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
 +++
diff --git a/content/blog/_index.es.md b/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
 +++
diff --git a/content/blog/_index.md b/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
 +++
diff --git a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp b/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp
diff --git a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp b/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp
diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/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 |

diff --git a/content/blog/mastering-tabi-settings/index.es.md b/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 |

diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md
@@ -8,6 +8,7 @@ description = "Discover the many ways you can customise your tabi site."
 tags = ["showcase", "tutorial", "FAQ"]
 
 [extra]
+show_previous_next_article_links = true
 footnote_backlinks = true
 quick_navigation_buttons = true
 social_media_card = "social_cards/blog_mastering_tabi_settings.jpg"
@@ -403,6 +404,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 |

diff --git a/sass/parts/_misc.scss b/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;
+        }
+    }
+}
diff --git a/templates/page.html b/templates/page.html
@@ -22,6 +22,7 @@
     "show_reading_time",
     "show_remote_changes",
     "toc",
+    "show_previous_next_article_links",
 ] %}
 
 <table>
@@ -129,6 +130,23 @@ <h3>TL;DR:</h3>
             {{ 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 %}

diff --git a/theme.toml b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,5 @@ insert_anchor_links = "left" @@
     [extra]
     social_media_card = "blog/social_cards/ca_blog.jpg"
+    show_previous_next_article_links = true
     +++