✨ feat: adjust width of prev/next link section (welpo#248)

Smtbook · Feb 29, 2024 · 1754174 · 1754174
1 parent 2d4453d
commit 1754174
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 1 deletion.
diff --git a/config.toml b/config.toml
@@ -113,6 +113,10 @@ katex = 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
 show_previous_next_article_links = false
 
+# Whether the navigation for previous/next article should match the full width of the site (same as the navigation bar at the top) or the article width.
+# To match the navigation bar at the top, set it to true.
+previous_next_article_links_full_width = 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/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md
@@ -413,6 +413,10 @@ Mostra enllaços als articles anterior i següent a la part inferior dels posts.
 
 Per activar aquesta funció, estableix `show_previous_next_article_links = true`.
 
+Per defecte, aquesta secció de navegació tindrà l'amplada completa del lloc (igual que la barra de navegació de la part superior). Per fer-la més estreta, coincidint amb l'amplada de l'article, configura `previous_next_article_links_full_width = false`.
+
+Aquesta configuració també segueix la jerarquia.
+
 ### 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
@@ -411,6 +411,10 @@ Muestra enlaces a los artículos anterior y siguiente en la parte inferior de lo
 
 Para activar esta función, configura `show_previous_next_article_links = true`.
 
+Por defecto, esta sección de navegación tendrá el ancho completo del sitio (igual que la barra de navegación de la parte superior). Para hacerla más estrecha, coincidiendo con el ancho del artículo, establece `previous_next_article_links_full_width = false`.
+
+Esta opción también sigue la jerarquía.
+
 ### 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
@@ -415,6 +415,10 @@ Displays links to the previous and next articles at the bottom of posts. It look
 
 To activate this feature, set `show_previous_next_article_links = true`.
 
+By default, this navigation section will have the full width of the site (same as the navigation bar at the top). To make it narrower, matching the article width, set `previous_next_article_links_full_width = false`.
+
+This setting also follows the hierarchy.
+
 ### Footnote Backlinks
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

diff --git a/templates/page.html b/templates/page.html
@@ -23,6 +23,7 @@
     "show_remote_changes",
     "toc",
     "show_previous_next_article_links",
+    "previous_next_article_links_full_width",
 ] %}
 
 <table>
@@ -132,7 +133,10 @@ <h3>TL;DR:</h3>
 
         {% 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">
+                {% if macros_settings::evaluate_setting_priority(setting="previous_next_article_links_full_width", page=page, default_global_value=true) == "true" %}
+                    {%- set full_width_class = "full-width" -%}
+                {% endif %}
+            <nav class="{{ full_width_class | default(value="") }} article-navigation">
                 <div>
                 {%- if page.lower -%}
                 <a href="{{ page.lower.permalink | safe }}">&#8249; {{ page.lower.title | truncate(length=100) }}</a>
@@ -147,6 +151,7 @@ <h3>TL;DR:</h3>
             {%- endif -%}
         {%- endif -%}
 
+        {# Comments #}
         {% if comment_system %}
             {% include "partials/comments.html" %}
         {% endif %}

diff --git a/theme.toml b/theme.toml
@@ -92,6 +92,10 @@ katex = 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
 show_previous_next_article_links = false
 
+# Whether the navigation for previous/next article should match the full width of the site (same as the navigation bar at the top) or the article width.
+# To match the navigation bar at the top, set it to true.
+previous_next_article_links_full_width = true
+
 # 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