deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-10 23:38:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ feat(i18n): display lcode in language switcher

Browse source
This commit is contained in:
redmie 2025-08-24 22:54:10 +02:00
parent c36d868b55
commit 543b431290
5 changed files with 41 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
config.toml
View file

@ -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).

6
content/blog/faq-languages/index.md
View file

@ -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.

25
sass/parts/_header.scss
View file

@ -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 {

5
templates/partials/language_switcher.html
View file

@ -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 -#}

3
theme.toml
View file

@ -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).