Введение
Поскольку мир становится все более взаимосвязанным, разработчикам приложений важно обслуживать глобальную аудиторию. Один из способов добиться этого — реализовать локализацию в вашем приложении, что означает адаптацию пользовательского интерфейса, текста и других элементов вашего приложения для поддержки нескольких языков. В этом сообщении блога мы рассмотрим, как реализовать локализацию JSON для многоязычных приложений с помощью JavaScript и популярной библиотеки i18next.
Что такое локализация JSON?
Локализация JSON — это метод управления переводами в вашем приложении с помощью файлов JSON. Каждый файл JSON содержит пары ключ-значение для переведенного текста на определенном языке. Эти файлы загружаются и обрабатываются вашим приложением для отображения соответствующего перевода в зависимости от языковых предпочтений пользователя.
Настройка вашего проекта
Для начала создайте новый проект, используя предпочитаемый вами метод (например, create-react-app, vue create или вручную настроив проект HTML, CSS и JS).
Установка и настройка i18next
i18next — это популярная библиотека интернационализации (i18n) для JavaScript, которая упрощает локализацию в вашем приложении. Чтобы установить i18next и его плагин React (если вы используете React), запустите:
npm install i18next i18next-http-backend i18next-browser-languagedetector react-i18next
Затем создайте новый файл i18n.js в папке src вашего проекта и добавьте следующий код для инициализации i18next:
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
.use(HttpBackend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
react: {
useSuspense: false,
},
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
});
export default i18n;
Создание и организация файлов перевода
Создайте новую папку с именем locales в папке public вашего проекта. Внутри папки locales создайте вложенные папки для каждого языка, который вы хотите поддерживать (например, en, es, fr). В каждой языковой папке создайте файл JSON с именем translation.json и добавьте переведенные пары ключ-значение. Например, английский файл translation.json может выглядеть так:
{
"welcome": "Welcome",
"language": "Language"
}
Реализация локализации в вашем приложении
Теперь вы готовы использовать i18next в своем приложении. Сначала импортируйте хук useTranslation из react-i18next в свой компонент:
import { useTranslation } from "react-i18next";
Затем используйте функцию t, предоставленную хуком useTranslation, для перевода текста вашего приложения:
const { t } = useTranslation();
return (
<div>
<h1>{t("welcome")}</h1>
<p>{t("language")}: English</p>
</div>
);
Заключение
В этом сообщении блога мы рассмотрели, как реализовать локализацию JSON для многоязычных приложений с помощью JavaScript и i18next. Следуя этим шагам, вы можете легко адаптировать пользовательский интерфейс и текст вашего приложения для поддержки нескольких языков:
- Настройте свой проект и установите i18next вместе с его плагинами.
- Настройте i18next в своем проекте и укажите расположение ваших файлов перевода.
- Создайте файлы перевода для каждого языка, который вы хотите поддерживать, и организуйте их в своем проекте.
- Используйте хук
useTranslationи функциюtв своих компонентах для отображения переведенного текста.
Не забудьте тщательно протестировать свое приложение и убедиться, что переводы точны и правильно отображаются. Локализовав свое приложение, вы можете улучшить его взаимодействие с глобальной аудиторией и охватить больше потенциальных пользователей по всему миру. Удачного кодирования!
