Интернационализация веб-приложений до сих пор была кошмаром. Поздоровайтесь с Ultimate I18n JS!
🚀 Три шага
Первый шаг. Добавьте Ultimate I18n JS в раздел <head>
в качестве первого скрипта на странице.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
Второй шаг. Установите код языка по умолчанию в теге <html>
.
<html lang="en">
Третий шаг. Добавьте переводы, установив атрибут i18n-[LANG_CODE]=""
для любого элемента на вашей странице.
<h1
i18n-pl="Witaj świecie"
i18n-es="Hola Mundo">
Hello World <!-- Your default language (en) -->
</h1>
Вот и все! 🤯 Теперь ваша страница многоязычна!
Библиотека автоматически определит язык пользователя и отобразит правильный перевод.
Чтобы вручную изменить язык, вызовите метод set
для объекта UltimateI18n
.
<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>
Библиотека помнит этот выбор. После перезагрузки страницы пользователь по-прежнему видит выбранный язык.
⚒ Сборщики модулей
Вы можете использовать Ultimate I18n JS с Webpack или аналогичным сборщиком. Чтобы установить пакет, выполните приведенную ниже команду.
npm install ultimate-i18n-js
Теперь вам нужно вызвать метод setup
перед рендерингом вашего приложения.
import * as UltimateI18n from 'ultimate-i18n-js';
UltimateI18n.setup();
document.addEventListener('DOMContentLoaded', () => { document.getElementById('placeholder').innerHTML = ` <span i18n-pl="Kocham czerwony" i18n-es="Amo el rojo"> I love red </span> `; });
Вот и все! 🤯
🤩 Демо
Проверьте эти онлайн-демонстрации: