Internationalization (i18n) with StepOne

StepOne offers built-in support for internationalization (i18n), allowing you to create multilingual websites with ease. This feature enables you to display content in different languages based on user preferences or location. In this guide, we will explore how to use the internationalization capabilities provided by StepOne.

Adding Language JSON Files

To begin, you'll need to create JSON files that contain the literals for each language you want to support. These files will serve as language packs and store the translations for your website's content.

1. Create a JSON file for each language you want to support. For example, en.json for English, fr.json for French, and so on.

2. In each JSON file, define key-value pairs where the keys represent the original strings in your default language, and the values hold the translated versions in the corresponding language. For example:

   // en.json (English)
   {
     "home": "Home",
     "about": "About",
     "contact": "Contact"
   }
   
   // fr.json (French)
   {
     "home": "Accueil",
     "about": "À propos",
     "contact": "Contact"
   }
   

3. Ensure that your JSON files are stored in a location accessible to your web application.

Implementing i18n in StepOne

Once you have your language JSON files prepared, you can integrate i18n functionality into your StepOne-powered website.

In your HTML markup, you can use StepOne's i18n functionality by replacing the text literals by the "_t" function. For example:

 <p>home</p>

Becomes

 <p>{_t("home")}</p>

Other optional parameters

You can also using this function force a particular language and have literals with variables.

• First attribute: The literal, that can include variables between double brackets.
• Second attribute: Forced language, if you want to skip the whole application selected language.
• Third attribute: The variables object, that if matching the ones in the literal will replace them.

 <p>{ _t("Hi! {{name}}, welcome back!", "en-UK", {name: person.name})}</p>

By following these steps, you can effectively implement internationalization in your StepOne-powered website. Users will be able to switch between different languages, and the content will be dynamically updated based on their selection