The aurelia-i18n library offers many different ways to translate texts. In this section, we will see what our options are.
The simplest way to translate text in a template is to use the translation attribute, named t. Let's illustrate this by translating our Not Found page.
We will start by moving the texts to the translation files:
locales/en/translation.js
{
"404": {
"explanation": "The page cannot be found.",
"title": "Something is broken..."
}
}
locales/fr/translation.js
{
"404": {
"explanation": "La page est introuvable.",
"title": "Quelque-chose ne fonctionne pas..."
}
}
As you can see, with translations being JSON structures, we can use nested keys without any problem.
To statically display a translated text inside an element, you just need to add the t attribute to the element and set its value to the path of the translation key:
src/not-found.html
<template>...