✨ feat(i18n): display lcode in language switcher

config.toml

@@ -184,6 +184,9 @@ iine_unified_languages = true
 # Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 post_listing_index_reversed = false  # Defaults to false.
 
+# Show current language code on the language switcher
+language_switcher_show_lcode = false # Defaults to false
+
 # DEPRECATED!
 # Use Zola's built-in `bottom_footnotes = true` in the [markdown] section instead. (Available since v0.19.0)
 # Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).

content/blog/faq-languages/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Lost in Translation? Not with tabi's Multilingual Capabilities"
 date = 2023-09-12
-updated = 2025-08-07
+updated = 2025-08-24
 description = "Master the art of serving a global audience through tabi's built-in multilingual features. Learn how to change the default language, add multilingual support, and contribute your own translations."
 
 [taxonomies]
@@ -148,3 +148,7 @@ If you did, you will need to manually update the translations. You can do this b
 ## Does tabi translate my content?
 
 No. tabi only translates the theme's text strings. You will need to translate your content yourself.
+
+# How to show current language code on the language switcher?
+
+Add `language_switcher_show_lcode = true` in your config extras.

sass/parts/_header.scss

@@ -125,6 +125,31 @@ header {
             background: var(--meta-color);
         }
     }
+
+    .language-switcher-icon-with-code {
+        width: 0.7rem;
+        height: 0.7rem;
+        margin-right: 0.3rem;
+    }
+}
+
+.language-switcher-icon-code {
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: -0.15rem;
+    color: var(--text-color);
+    font-weight: bold;
+    left: 0.6rem;
+    &:hover {
+        color: var(--meta-color);
+    }
+    font-size: 0.5rem;
+}
+
+.language-switcher-selected-item {
+    font-weight: bold;
 }
 
 .dropdown {

templates/partials/language_switcher.html

@@ -1,7 +1,12 @@
 <li class="language-switcher">
     <details class="dropdown">
         <summary role="button" aria-haspopup="true" title="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}" aria-label="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}">
+            {%- if config.extra.language_switcher_show_lcode -%}
+            <div class="language-switcher-icon language-switcher-icon-with-code"></div>
+            <div class="language-switcher-icon-code">{{lang}}</div>
+            {%- else -%}
             <div class="language-switcher-icon"></div>
+            {%- endif -%}
         </summary>
         <div class="dropdown-content" role="menu">
             {#- Display the current language first in the dropdown -#}

theme.toml

@@ -132,6 +132,9 @@ iine_unified_languages = true
 # Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 post_listing_index_reversed = false  # Defaults to false.
 
+# Show current language code on the language switcher
+language_switcher_show_lcode = false # Defaults to false
+
 # DEPRECATED!
 # Use Zola's built-in `bottom_footnotes = true` in the [markdown] section instead. (Available since v0.19.0)
 # Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).