Homepage

Multi-Language Page

Last edit: Jun 06, 2024

Defaults

English is the default language.

If there is a language query param in the URL, it will respect its value. For example /contact?language=de.

The language can also be set in context.session and you can modify it with ?language= param.

Switching between laguages

You can check and set the language to switch using the following code:


{% liquid
  assign language_switch_url = context.localtion.pathname
  assign language_icon = 'language-pl'
  if context.session.language == 'pl'
    assign language_switch_url = language_switch_url | append: '?language=en'
    assign language_icon = 'language-en'
  else
    assign language_switch_url = language_switch_url | append: '?language=pl'
  endif
%}
<a href="{{ language_switch_url }}" aria-label="Change language">
  {%- include "svg/icons", icon: language_icon -%}
</a>

Simple usage

To be able to use the translations feature, there has to be at least one translation file present.

In this example, we will use the page translation key in two languages to demonstrate the mechanism.


---
slug: multilanguage
---
{{ 'general.greeting' | t }}

app/translations/en.yml
en:
  general:
    greeting: Hello, World!
app/translations/pl.yml
pl:
  general:
    greeting: Witaj świecie!

Having these two files enables you to use the t filter. t stands for translate, and you can use both.

For example, opening /multilanguage will default to English. Opening /multilanguage?language=pl will try to use Polish and fall back to English for keys that haven't been found.

/multilanguage

Hello, World!

/multilanguage?language=pl

Witaj świecie!

Arrays

Inside YAML, it is possible to include any data structure that is usable in JSON, including arrays.

Visit json2yaml to learn how YAML will convert to JSON or vice-versa if you feel more comfortable in JSON.

You can use this feature alongside other filters to store collections in a readable form.

app/translations/en.yml
en:
  general:
    cars:
      - Ford Mustang
      - Corvette
      - Gran Torino
app/translations/jp.yml
jp:
  general:
    cars:
      - Honda
      - Subaru
      - Lexus

Example page


{% assign cars = 'general.cars' | t | to_hash %}

<ul>
{% for car in cars %}
<li>{{ car }}</li>
{% endfor %}
</ul>

/multilanguage?language=en

<ul>
  <li>Ford Mustang</li>
  <li>Corvette</li>
  <li>Gran Torino</li>
</ul>

/multilanguage?language=jp

<ul>
  <li>Honda</li>
  <li>Subaru</li>
  <li>Lexus</li>
</ul>

Parameterization (variables)

Sometimes you'll need to translate parts of a sentence, but keep others (e.g. names). In these cases, some of the content should be parameterized.

The translate filter accepts named arguments and %{variable} syntax is available in translations keys.

app/translations/en.yml
en:
  personal:
    hello: 'Hello %{name}. Take a look at my website: %{url}'
app/translations/pl.yml
pl:
  personal:
    hello: 'Cześć %{name}. Zerknij na moją stronę www: %{url}'

Example page


{% liquid
  assign my_name = context.params.name | default: "Pawel"
  assign url = context.params.url | default: "https://example.com"
%}

{{ 'personal.hello' | t: name: my_name, url: url }}

/multilanguage?language=en&name=John&url=https://documentation.platformos.com

Hello John. Take a look at my website: https://documentation.platformos.com

/multilanguage?language=pl&name=Pawel&url=https://platform-os.com

Czesc Pawel. Zerknij na moja strone www: https://platform-os.com

Pluralization

In many languages — including English — there are only two forms, a singular and a plural, for a given string, e.g. "1 message" and "2 messages". Other languages (Arabic, Japanese, Russian and many more) have different grammars that have additional or fewer plural forms. Thus, the t provides a flexible pluralization feature.

The count interpolation variable has a special role in that it both is interpolated to the translation and used to pick a pluralization from the translations according to the pluralization rules defined in the pluralization backend. By default, only the English pluralization rules are applied.

If you set this to your language file:

about_x_item:
  one: 'One item'
  other: '%{count} items'

then


{{ 'about_x_item' | t: count: 12 }}
{{ 'about_x_item' | t: count: 1 }}

renders

12 items
One item

Live example and source code

Compilation of all examples above:

Source code can be found on GitHub.

Questions?

We are always happy to help with any questions you may have.

contact us