Front matter
In the front matter of each page or post, but for the usual variables, we set two new custom variables to handle the multilingual logic1 of the site:
language
defines the language of the page/postlanguage_reference
relates different translations of the same page/post
We can use language
to retrieve only the pages or posts that have the same language, and language_reference
to retrieve only the pages or posts that return the same content translated in different languages (read the sections navigation.html and language-switch.html for more details).
Pages
For example, here is the front matter of the English page Stories:
---
layout: page
title: Stories
description: Stories.
language: en
language_reference: stories
published: true
order: 2
---
and here is the front matter of its Italian counterpart:
---
layout: page
title: Storie
description: Storie.
language: it
language_reference: stories
published: true
order: 2
---
Both pages have the variable language_reference
set to stories
so that they can be easily related with each other.
Posts
For example, here is the front matter of the English post Hello World:
---
layout: post
title: Hello World
description: Hello world.
date: 2021-01-01 00:00:00
language: en
language_reference: world
published: true
---
and here is the front matter of its Italian counterpart:
---
layout: post
title: Ciao Mondo
description: Ciao Mondo.
date: 2021-01-01 00:00:00
language: it
language_reference: world
published: true
---
Both posts have the variable language_reference
set to world
so that they can be easily related with each other.
Data files
We create a YAML data file named snippets.yml
to store the different translations of the user interface copy as additional data in the _data
subdirectory.
We then create a new variable named snippets
in the base.html
layout to shorten the code that we need to write to access the data contained in the snippets.yml
file:
{%- assign snippets = site.data.snippets %}
Since the base.html
layout is the base for all the other layouts, if we place the variable snippets
there, we can then access it from any other page.
Through this variable, we can write just snippets.name_of_the_data_item
when accessing a data item rather than the full, longer site.data.snippets.name_of_the_data_item
.
For example, the piece of code that generates the Back to the Top link at the bottom of the page:
<a href="#{{ snippets.top[page.language] | slugify: 'latin' }}">{{ snippets.back[page.language] }}</a>
uses the following variable:
{{ snippets.back[page.language] }}
to retrieve the name of the link in the current selected language from the following lines in the snippets.yml
data file:
back:
en: Back to the Top
it: Torna in Cima
top:
en: Top
it: Cima
In the eventuality that the user interface copy is quite lengthy, we might consider creating a different data file for each language and place it in a dedicated subdirectory—similarly to what we already do for pages and posts. For the sake of this basic site, we keep things simple and use only one single data file to list the copy in all the different languages.
-
The logic is based on the principle articulated in Sylvain Durand’s Making Jekyll Multilingual. ↩