• Posted on June 4, 2021
• 55 views fix me

I went through different options to convert my HTML website into a multilingual website transform . My goal was to do the translation with pure javascript. I also wanted to follow the standard method of localization in most popular JavaScript frameworks like Angular, Vue.js, React, etc.

After some research I came across the i18next library which provides a useful API to build multilingual website and I will show you how to build a multilingual website using i18next and vanilla JS. Follow this step-by-step guide to turn your static website into a multilingual website.

Reading: How to create a multilingual website in html

Step 1 (Adding the i18next library)

Add this to your header HTML to import i18next

Step 2 (Configuring i18next)

Add this to the top of your HTML to configure i18next. This example adds Russian language to the website. You can add multiple languages ​​by adding their language names to the langs constant.

See also: How To Start A Programming Blog In 2023: Step-by-Step Tutorial

This script uses fetch and promises to load the translation files and target the strings based on their class and attributes.

more details on i18next documentation

function updateContent() { const elements = document.getElementsByClassName(“i18nelement”); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const k = element.getAttribute("data-i18n"); element.innerHTML = i18next.t(k); } } asynchronous function i18Loader() { const langs = ["en", "ru"]; const jsons = await Promise.all( langs.map((l) => fetch(“src/i18/” + l + “.json”).then((r) => r. json())) ); const res = langs.reduce((acc, l, idx) => { acc[l] = { translation: jsons[idx] }; return acc; }, {}); await i18next.init({ lng: “en”, debug: true, resources: res }); updateContent(); i18next.on(“languageChanged”, () => { updateContent(); }); const langSelector = Document.getElementById(“langSelector”); langSelector.removeAttribute(“disabled”); langSelector.addEventListener(“change”, (e) => { i18next.changeLanguage(e.target.value); }); } i18Loader();

Step 3 (creating translations)

We will create one translation file per language in json format. For example, we will have “en” and “ru” languages ​​on the website, so I will create “en.json” and “ru.json” files in the src/i18 folder as configured in step 2.

en.json

{ “home”: { “title”: “Home”, } }

See also: How to Create a Members-Only Area in WordPress

ru.json

{ “home”: { “title”: “Домашняя страница”, } }

Step 4 (Targeting strings)

now we need class and attribute add to the string we want to translate. Here is an example:

Load

Just repeat the process for all strings in your entire project. Don’t forget to define the translations in json files.

Step 5 (Language Switcher)

Finally, add a language switcher to change the language. You can add more languages ​​by adding more options to the selection box. Don’t forget to set the language name value for each option.

See also: How to start selling software online (directly from your website)

Sandbox

.