Интернационализация

Интернационализация в Marko позволяет создавать приложения, которые могут адаптироваться под различные языки и регионы. Фреймворк предоставляет набор инструментов для локализации контента и форматирования данных в зависимости от выбранной культуры. Это особенно важно для приложений, ориентированных на международную аудиторию, где требуется поддержка нескольких языков, валют, дат и других региональных настроек.

Marko использует стандартные подходы для работы с интернационализацией, включая использование сторонних библиотек, таких как Globalize.js или i18next. Эти библиотеки обеспечивают поддержку множества языков и позволяют легко подключать новые локализации в приложение.

Для интеграции с системой интернационализации, Marko предоставляет возможность использовать специальные компоненты и API, которые позволяют подключить переводы и динамически изменять язык интерфейса.

Настройка интернационализации

Для начала необходимо выбрать библиотеку для работы с интернационализацией. Одним из самых популярных решений для этого является i18next, который поддерживает множество функций, таких как загрузка переводов, смена языка и форматы данных.

  1. Установка библиотеки i18next:
npm install i18next
  1. Настройка i18next в приложении Marko:

Для интеграции с Marko необходимо настроить и подключить i18next в конфигурации вашего проекта.

import i18next from 'i18next';

i18next.init({
  lng: 'en', // Язык по умолчанию
  resources: {
    en: {
      translation: {
        welcomeMessage: 'Welcome to our website!',
      },
    },
    ru: {
      translation: {
        welcomeMessage: 'Добро пожаловать на наш сайт!',
      },
    },
  },
});

В данном примере создается объект с переводами для двух языков: английского и русского. Для каждого языка указывается набор ключей с соответствующими переводами.

Использование переводов в компонентах Marko

Для использования переводов в компонентах Marko, необходимо передать данные из i18next в шаблон. Это можно сделать через контекст компонента.

Пример компонента Marko с использованием перевода:

<template>
  <div>
    <h1>${i18next.t('welcomeMessage')}</h1>
  </div>
</template>

<script>
  import i18next from 'i18next';

  export default class {
    onCreate() {
      this.i18next = i18next;
    }
  }
</script>

В этом примере мы используем метод i18next.t('welcomeMessage') для отображения перевода строки на основе выбранного языка. Если язык переключается, компонент автоматически обновит текст на основе нового языка.

Форматирование данных

Кроме перевода строк, часто требуется форматировать данные в зависимости от региона, например, для вывода дат, чисел или валют. Библиотеки, такие как Globalize.js, помогают решить эту задачу, предоставляя функции для правильного форматирования данных в соответствии с локализацией.

  1. Установка и настройка Globalize.js:
npm install globalize
  1. Использование Globalize.js в Marko:
import Globalize from 'globalize';

// Настройка Globalize для различных локализаций
Globalize.load(
  require('cldr-data/supplemental/numberingSystems.json'),
  require('cldr-data/main/en/ca-gregorian.json'),
  require('cldr-data/main/ru/ca-gregorian.json')
);

// Настройка текущей локализации
Globalize.locale('en');

// Форматирование числа
const formattedNumber = Globalize.formatNumber(1234567.89);
  1. Пример использования в компоненте Marko:
<template>
  <div>
    <p>Цена: ${globalize.formatNumber(1234567.89)}</p>
  </div>
</template>

<script>
  import Globalize from 'globalize';

  export default class {
    onCreate() {
      this.globalize = Globalize;
    }
  }
</script>

В этом примере число 1234567.89 будет отформатировано в соответствии с выбранной локализацией (например, как 1,234,567.89 для английского и 1 234 567,89 для русского).

Переключение языка

Переключение языка в приложении позволяет пользователю изменять локализацию без перезагрузки страницы. Marko поддерживает динамическое обновление интерфейса при изменении языка.

  1. Переключение языка с использованием i18next:

Для смены языка можно использовать метод i18next.changeLanguage(). Это приведет к переключению языка и обновлению всех соответствующих переводов в приложении.

i18next.changeLanguage('ru'); // Переключение на русский язык
  1. Обновление компонента при смене языка:

Для динамического обновления интерфейса можно использовать реактивность Marko. После смены языка, компонент автоматически перерисует отображаемый текст.

<template>
  <div>
    <h1>${i18next.t('welcomeMessage')}</h1>
    <button on-click="changeLanguage">Сменить язык</button>
  </div>
</template>

<script>
  import i18next from 'i18next';

  export default class {
    onCreate() {
      this.i18next = i18next;
    }

    changeLanguage() {
      const newLang = this.i18next.language === 'en' ? 'ru' : 'en';
      this.i18next.changeLanguage(newLang);
      this.emit('update');
    }
  }
</script>

Обработка форматов дат и времени

Часто необходимо отображать дату и время в соответствии с локализацией. Для этого можно использовать функцию Globalize.formatDate(), которая позволяет форматировать дату в зависимости от выбранной культуры.

const formattedDate = Globalize.formatDate(new Date(), { datetime: 'short' });

Локализация чисел и валют

В Marko также можно легко работать с числовыми и валютными форматами. Для этого следует использовать метод Globalize.formatCurrency() для отображения валют в нужном формате.

const formattedCurrency = Globalize.formatCurrency(1234567.89, 'USD');

Загрузка переводов

Для более сложных приложений может потребоваться динамическая загрузка переводов на основе языка пользователя. Это можно реализовать с помощью асинхронных методов загрузки в i18next.

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: () => import('./locales/en.json'),
    },
    ru: {
      translation: () => import('./locales/ru.json'),
    },
  },
});

Заключение

Интернационализация в Marko представляет собой мощный набор инструментов для создания многоязычных приложений. Использование библиотек, таких как i18next и Globalize.js, позволяет легко интегрировать поддержку множества языков и региональных настроек. Это значительно улучшает пользовательский опыт, обеспечивая корректное отображение данных и переводов на разных языках, а также позволяет эффективно управлять локализацией во всем приложении.

Оглавление