> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Переводы

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

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

В вашем приложении есть два типа переводимого текста, и оба проходят через один и тот же
каталог `locales/`:

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

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

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

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

```tsx theme={null}
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` в недвусмысленный перевод идентичных исходных строк, которые переводят
по-разному:

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

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

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

```bash theme={null}
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`, где ключом
является исходная строка. Заполните перевод:

```json theme={null}
// 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` (и переразвертывание), то же самое, что и любые другие изменения.

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

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

```tsx theme={null}
<Trans>Welcome back</Trans>
<Trans>
  Welcome
  back
</Trans>
```