Skip to main content
Приложения Twenty создаются на английском: строки в вашем исходном коде и манифесте являются исходным текстом на английском, en — это исходная локаль, с которой вы переводите, а любая непереведенная локаль будет использовать ее по умолчанию. В вашем приложении есть два типа переводимого текста, и оба проходят через один и тот же каталог locales/:
  • Метки манифеста — имена объектов и полей, заголовки представлений, пункты меню и другие строки, объявленные в метаданных вашего приложения.
  • Строки фронт-компонента — пользовательский интерфейс для отображения React фронтальных компонентов.
Вы помечаете переводимые строки, извлекаете их в каталоги для каждой локали, переводите эти каталоги, и сборка отдает правильный язык для текущего пользователя — без дополнительной настройки.

​
Маркировка переднего компонента

Импортировать помощников перевода из twenty-sdk/front-component:

​
Когда использовать, какой

  • Trans — статический текст в JSX. Используйте пропсы message и values для интерполяции, как в Trans message="Hi {name}" values={{ name }}; интерполяция напрямую в дочерних элементах не может быть статически извлечена.
  • useTranslate().t — динамические строки внутри компонента. Повторно отображается, когда пользователь переключает язык. Предпочитать это внутри рендера.
  • t(...) (импортировано напрямую) — перевод можно использовать где, включая обработчики событий, вспомогательные и область модулей — не только внутри рендера.
  • msg(...) — ленивый дескриптор строк, объявленный данными (константы, config). Разрешите позже с помощью t(descriptor).

​
Контекст

Передайте context в недвусмысленный перевод идентичных исходных строк, которые переводят по-разному:
Контекстные строки отображаются в каталогах локалей в виде группы, индексируемой по их контексту: "\<context>": { "\<message>": "\<translation>" }. Манифестные метки являются контекстными по своей природе — каждая из них несёт метаданные о своей роли (objectMetadata.labelSingular, fieldMetadata.label, view.name, …), поэтому одно и то же слово может переводиться по‑разному как имя объекта и как имя представления.

​
Извлечение и перевод

Выполнить команду извлечения из вашей папки приложения:
При извлечении собираются как метки манифеста, так и строки t()/msg()/Trans из исходного кода вашего фронт‑компонента в locales/\<locale>.json, где ключом является исходная строка. Заполните перевод:
Строки без контекста являются плоскими записями; контекстные строки — включая каждую метку манифеста — вложены под своим ключом контекста. Такие держатели, как {name}, заменяются во время выполнения — сохраняйте их в переводе . Любая оставленная строка пуста возвращается к исходному тексту.

​
Как он запускается

twenty dev:build компилирует каталоги и предоставляет нужный язык для текущего пользователя: метки манифеста разрешаются на стороне сервера, а каталоги фронтенд-компонентов встраиваются в каждый бандл компонента. Во время выполнения компонент читает локаль из контекста выполнения (текущий язык узла) и разрешает каждую строку в соответствии со своим каталогом, возвращение к источнику, когда перевод отсутствует. Переключение языка в хосте повторно рендерит строки Trans и useTranslate().t в реальном времени. Метки манифеста компилируются при каждой синхронизации — twenty dev:build, twenty apply и в постоянном режиме отслеживания twenty dev — поэтому достаточно изменить файл локали и выполнить синхронизацию, чтобы увидеть новый текст. Каталоги компонентов Front встраиваются в каждый пакет компонентов во время сборки, поэтому изменение одного из них по-прежнему требует повторного запуска twenty dev:build (и повторного развертывания). Дочерние текстовые элементы Trans могут занимать несколько строк — пробельные символы схлопываются так же, как их схлопывает JSX, поэтому оба этих варианта извлекаются в ключ Welcome back: