polyglot
polyglot copied to clipboard
Switcher link for default language is current language instead of default language
Hi all,
sorry for the long title, but I didn't find a previous similar issue and I don't exactly know how to express it. Hopefully it's easy to resolve and it's a dumb thing 🙃
Basically, I am trying to setup three languages: English, Italian, and Spanish. I got as far as the homepage with testing, and this is the issue that I am having:
- If I am on localhost:4000/ all links in the switcher are fine
- If I am on localhost:4000/it/ the English link is localhost:4000/it/ but it should be localhost:4000/
- If I am on localhost:4000/es/ the English link is localhost:4000/es/ but it should be localhost:4000/
The Italian and Spanish buttons seem to always be fine regardless.
Below I am including the Polyglot config in my config.yml, the switcher snippet, the navigation.yml and the front matter for my homepage and its translations. Please do let me know if you need anything else. Thanks a million for the help!
_config.yml settings (there is no locale set or anything)
# Polyglot internationalization settings
languages: ["en-gb", "it", "es"]
default_lang: "en-gb"
exclude_from_localization: ["javascript", "images", "css", "public", "sitemap.xml"]
parallel_localization: true # Set to true in Windows
url: "https://testsite.com"
# Map for display names:
language_names:
en-gb: English
it: Italiano
es: Español
Switcher Snippet
<!-- Language Switcher -->
<div id="language-switcher">
{% assign current = page.lang | default: site.default_lang %}
{% for lang in site.languages %}
{% assign lang_name = site.language_names[lang] %}
{% if lang == current %}
<span class="mx-2 active fw-bold">{{ lang_name }}</span>
{% else %}
{%- comment -%}
Default → page.url (e.g. "/about/");
Others → "/{lang}" + page.url (→ "/it/about/")
{%- endcomment -%}
{% if lang == site.default_lang %}
{% assign slug = page.url %}
{% else %}
{% assign slug = "/" | append: lang | append: page.url %}
{% endif %}
<a href="{{ slug | relative_url }}" class="mx-2">{{ lang_name }}</a>
{% endif %}
{% endfor %}
</div>
<!-- Language Switcher End -->
navigation.yml (in _data/)
en-gb:
menu_title: "Primary Navigation"
items:
- label: Blog
url: /blog/
it:
menu_title: "Navigazione"
items:
- label: Blog
url: /blog/
es:
menu_title: "Navegación"
items:
- label: Blog
url: /blog/
Front Matters for index.html
---
layout: default
title: Homepage
permalink: /
lang: en-gb
---
for index-it.html
---
layout: default
title: Homepage
permalink: /
lang: it
---
for index-es.html
---
layout: default
title: Homepage
permalink: /
lang: es
---
Again, thanks a million!
You should disable url relativizing (as in the docs) to build your language switcher. This is done via static_href. Let me show you how I did it in one site:
<!-- Toogle language -->
{% if site.languages.size >= 2 %}
{% if site.languages.size == 2 %}
{% if site.active_lang == site.languages.first %}
{% assign other_language = site.languages.last %}
{% else %}
{% assign other_language = site.languages.first %}
{% endif %}
{% if site.active_lang == site.default_lang %}
<a class="button-change-language" {% static_href -%} href="{{ site.baseurl }}/{{ other_language }}{{ page.url }}" {%- endstatic_href %}>
{{ other_language | upcase }}
</a>
{% else %}
<a class="button-change-language" {% static_href -%} href="{{ site.baseurl }}{{ page.url }}" {%- endstatic_href %}>
{{ site.default_lang | upcase }}
</a>
{% endif %}
{% else %}
<div class="button-change-language">
{{ site.active_lang | upcase }}
<ul class="language-dropdown">
{% for l in site.languages %}
{% if l != site.active_lang %}
<li>
{% if l == site.default_lang %}
<a {% static_href -%} href="{{ site.baseurl }}{{ page.url }}" {%- endstatic_href %}>{{ site.default_lang | upcase }}</a>
{% else %}
<a {% static_href -%} href="{{ site.baseurl }}/{{ l }}{{ page.url }}" {%- endstatic_href %}>{{ l | upcase }}</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
{% endif %}
<!-- End Toogle language -->