- 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: Generating static sites from ASP.NET Core MVC apps
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 Killer Blog Post Title (9 Easy Examples to Increase CTR)
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 Create a Forum for Your Website
Sandbox
.
