Localize pages

The simplest way of maintaining parallel English and French pages is to maintain two pages that reference each other through their front matter. This means:

On an English language page, fr_page_url should be a reference to the URL of the parallel French language page.
On a French language page, en_page_url should be a reference to the URL of the parallel French language page.

This structure allows the language switcher link to be appropriately generated in the header when building the site.

Maintaining content in multiple languages

To keep content in sync across English and French pages, you can use locale files. The data in these files will be injected into your pages using a custom Eleventy filter.

By default, new Ontario.ca Frontend projects include a localization directory in the _data folder (src/_data/localization) for you to store locale files. You can organize your content using nested keys, meaning you can group strings together by page, section, element, or however you like.

Below, we have organized a title and welcome string to be used on both English and French pages of a project:

src/_data/localization/homepage-locale-strings.json

{  "homePage": {    "title": {      "en": "Home Page",      "fr": "Page d'accueil"    },    "welcome": {      "en": "Welcome to the Ontario.ca Jamstack Toolkit.",      "fr": "Bienvenue à la boîte à outils Jamstack Ontario.ca."    },  }}

To inject these strings into a layout template, insert a variable with the matching keys, and include the localeString filter:

src/_includes/app/base.njk

---title: My New Pagelayout: base.njk---<!-- Your page content goes here --><h1>{{ "homePage.title" | localeString }}</h1>

Images and links

To keep things clean, especially when dealing with images and links, you can add additional filters to your markup in your layout template: markdown and safe. Using the safe filter sanitizes any markdown in your locale strings.

src/_data/localization/homepage-locale-strings.json

"welcome": {  "en": "Welcome to the Ontario.ca <a href=\"https://jamstack.org/\">Jamstack</a> Application Toolkit.",  "fr": "Bienvenue à la trousse d'outils d'application <a href=\"https://jamstack.org/\">Jamstack</a> d'Ontario.ca."}

src/_includes/app/base.njk

---title: My New Pagelayout: base.njk---<!-- Your page content goes here --><h1>{{ "homePage.title" | localeString }}</h1><p>{{ "homePage.welcome" | localeString | markdown | safe }}</p>