Переводы

Приложения Twenty создаются на английском: строки в вашем исходном коде и манифесте являются исходным текстом на английском, en — это исходная локаль, с которой вы переводите, а любая непереведенная локаль будет использовать ее по умолчанию. В вашем приложении есть два типа переводимого текста, и оба проходят через один и тот же каталог locales/:

Метки манифеста — имена объектов и полей, заголовки представлений, пункты меню и другие строки, объявленные в метаданных вашего приложения.
Строки фронт-компонента — пользовательский интерфейс для отображения React фронтальных компонентов.

Вы помечаете переводимые строки, извлекаете их в каталоги для каждой локали, переводите эти каталоги, и сборка отдает правильный язык для текущего пользователя — без дополнительной настройки.

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

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

import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';

const STATUSES = [
  { id: 'draft', label: msg('Draft') },
  { id: 'sent', label: msg('Sent') },
];

const Card = ({ count, name }: { count: number; name: string }) => {
  const { t } = useTranslate();

  return (
    <section>
      {/* Static text — reactive to the user's locale */}
      <Trans>Loading postcard…</Trans>

      {/* Disambiguate identical sources with a context */}
      <Trans context="card-title">Untitled</Trans>

      {/* Interpolation: pass values explicitly */}
      <p>{t('Hi {name}', { name })}</p>
      <p>{t('Saved {count} cards', { count })}</p>

      {/* Resolve a lazily-declared descriptor */}
      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
    </section>
  );
};

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

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

Контекст

Передайте context в недвусмысленный перевод идентичных исходных строк, которые переводят по-разному:

t({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>

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

Выполнить команду извлечения из вашей папки приложения:

twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale

При извлечении собираются как метки манифеста, так и строки t()/msg()/Trans из исходного кода вашего фронт‑компонента в locales/\<locale>.json, где ключом является исходная строка. Заполните перевод:

// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}

Такие держатели, как {name}, заменяются во время выполнения — сохраняйте их в переводе . Любая оставленная строка пуста возвращается к исходному тексту.

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

twenty dev:build компилирует каталоги и предоставляет нужный язык для текущего пользователя: метки манифеста разрешаются на стороне сервера, а каталоги фронтенд-компонентов встраиваются в каждый бандл компонента. Во время выполнения компонент читает локаль из контекста выполнения (текущий язык узла) и разрешает каждую строку в соответствии со своим каталогом, возвращение к источнику, когда перевод отсутствует. Переключение языка в хосте повторно рендерит строки Trans и useTranslate().t в реальном времени. Поскольку каталоги скомпилированы в момент сборки, обновление перевода означает повторное выполнение twenty dev:build (и переразвертывание), то же самое, что и любые другие изменения.

Переводы скомпилированы в twenty dev:build (и twenty apply). В непрерывном часе показаны исходные строки, поэтому тестовый локализованный вывод с одноразовой сборкой.

Дочерние текстовые элементы Trans могут занимать несколько строк — пробельные символы схлопываются так же, как их схлопывает JSX, поэтому оба этих варианта извлекаются в ключ Welcome back:

<Trans>Welcome back</Trans>
<Trans>
  Welcome
  back
</Trans>

Обзор

Приложения

API

Самостоятельный хостинг

Внести вклад

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

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

Контекст

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

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

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

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

​Контекст

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

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

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

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

Контекст

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

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