feat(article-links): Support reverse links order

Default order is next on the left and previous on the right.
Reverse order is previous on the left and next on the right.

Documentation update limited to english version only.

config.toml

@@ -138,6 +138,12 @@ 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
 
+# Invert order of the links to previous and next articles at the bottom of posts.
+# By default, next articles are on the left side of the page and previous articles are on the right side.
+# To reverse the order (next articles on the right and previous articles on the left), set it to true.
+# 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
+invert_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

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

@@ -477,9 +477,13 @@ 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`.
+By default, next articles will be on the left side of the page and previous articles will be on the right side.
+To reverse the order (next articles on the right and previous articles on the left), set `invert_previous_next_article_links = true`.
 
-This setting also follows the hierarchy.
+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`.
+
+All those settings also follows the hierarchy.
 
 ### Footnote Backlinks
 

templates/page.html

@@ -23,6 +23,7 @@
     "show_remote_changes",
     "toc",
     "show_previous_next_article_links",
+    "invert_previous_next_article_links",
     "previous_next_article_links_full_width",
 ] %}
 
@@ -133,18 +134,37 @@
 
         {% 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 -%}
+                {% if macros_settings::evaluate_setting_priority(setting="invert_previous_next_article_links", page=page, default_global_value=true) == "true" %}
+                    {% if page.higher %}
+                        {% set article_links_left_side_link = page.higher.permalink %}
+                        {% set article_links_left_side_title = page.higher.title %}
+                    {% endif %}
+                    {% if page.lower %}
+                        {% set article_links_right_side_link = page.lower.permalink %}
+                        {% set article_links_right_side_title = page.lower.title %}
+                    {% endif %}
+                {% else %}
+                    {% if page.lower %}
+                        {% set article_links_left_side_link = page.lower.permalink %}
+                        {% set article_links_left_side_title = page.lower.title %}
+                    {% endif %}
+                    {% if page.higher %}
+                        {% set article_links_right_side_link = page.higher.permalink %}
+                        {% set article_links_right_side_title = page.higher.title %}
+                    {% endif %}
+                {% endif %}
                 {% 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 }}">← {{ page.lower.title | truncate(length=100) }}</a>
+                {%- if article_links_left_side_link and article_links_left_side_title -%}
+                <a href="{{ article_links_left_side_link | safe }}" aria-label="{{ article_links_left_side_title | truncate(length=100) }}">← {{ article_links_left_side_title | truncate(length=100) }}</a>
                 {%- endif -%}
                 </div>
                 <div>
-                {%- if page.higher -%}
-                <a href="{{ page.higher.permalink | safe }}"> {{ page.higher.title | truncate(length=100) }} →</a>
+                {%- if article_links_right_side_link and article_links_right_side_title -%}
+                <a href="{{ article_links_right_side_link | safe }}" aria-label="{{ article_links_right_side_title | truncate(length=100) }}">{{ article_links_right_side_title | truncate(length=100) }} →</a>
                 {%- endif -%}
                 </div>
             </nav>

theme.toml

@@ -99,6 +99,12 @@ 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
 
+# Invert order of the links to previous and next articles at the bottom of posts.
+# By default, next articles are on the left side of the page and previous articles are on the right side.
+# To reverse the order (next articles on the right and previous articles on the left), set it to true.
+# 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
+invert_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