Multi-Language Page
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.