polyglot icon indicating copy to clipboard operation
polyglot copied to clipboard

Switcher link for default language is current language instead of default language

Open ghost opened this issue 7 months ago • 1 comments

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!

ghost avatar Apr 18 '25 09:04 ghost

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

george-gca avatar Apr 18 '25 17:04 george-gca