Překlady

Doručte svou aplikaci v několika jazycích — překládejte popisky manifestu a texty uživatelského rozhraní prostřednictvím jednoho katalogu locales.

Aplikace Twenty jsou psané v angličtině: řetězce ve vašem zdrojovém kódu a manifestu tvoří anglický zdrojový text, en je zdrojová locale, ze které překládáte, a jakákoli locale ponechaná bez překladu se na ni automaticky vrátí.

Vaše aplikace má dva druhy přeložitelného textu a oba procházejí stejným katalogem locales/:

• Popisky manifestu — názvy objektů a polí, názvy zobrazení, položky nabídky a další řetězce deklarované v metadatech vaší aplikace.
• Řetězce front komponent — text uživatelského rozhraní, který vykreslují vaše React front komponenty.

Označíte přeložitelné řetězce, extrahujete je do katalogů pro jednotlivé jazyky, přeložíte tyto katalogy a build doručí správný jazyk pro aktuálního uživatele — bez dalšího zapojování.

​

Označování řetězců front komponent

Importujte pomocné překladové funkce z 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>
  );
};

​

Kdy co použít

• <Trans>…</Trans> — statický text v JSX. Použijte props message a values pro interpolaci (<Trans message="Hi {name}" values={{ name }} />); interpolace přímo v potomcích není staticky extrahovatelná.
• useTranslate().t — dynamické řetězce uvnitř komponenty. Znovu se vykreslí, když uživatel přepne jazyk. Uvnitř renderu tomuto dávejte přednost.
• t(...) (importované přímo) — okamžitý překlad použitelný kdekoli, včetně obsluh událostí, pomocných funkcí a v modulovém rozsahu — nejen uvnitř renderu.
• msg(...) — líný deskriptor pro řetězce deklarované jako data (konstanty, konfigurace). Vyhodnoťte jej později pomocí t(descriptor).

​

Kontext

Předejte context, abyste odlišili identické zdrojové řetězce, které se překládají rozdílně:

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

​

Extrahování a překládání

Spusťte příkaz pro extrakci z adresáře své aplikace:

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

Extrakce shromáždí jak popisky manifestu, tak řetězce t()/msg()/\<Trans> z vašeho zdrojového kódu front komponent do locales/\<locale>.json, kde jsou klíčem zdrojové řetězce. Doplňte překlady:

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

Zástupné symboly jako {name} jsou nahrazeny za běhu — ponechejte je v překladu. Jakýkoli řetězec ponechaný prázdný spadne zpět na zdrojový text.

​

Jak to běží

twenty dev:build zkompiluje katalogy a doručí správný jazyk pro aktuálního uživatele: popisky manifestu jsou vyhodnoceny na straně serveru a katalogy front komponent jsou zabudovány do každého balíčku komponent. Za běhu komponenta čte jazykovou verzi (locale) z vykonávacího kontextu (aktuální jazyk hostitele) a překládá každý řetězec podle svého katalogu, přičemž při chybějícím překladu spadne zpět na zdroj. Přepnutí jazyka v hostiteli znovu vykreslí řetězce \<Trans> a useTranslate().t v reálném čase.

Protože katalogy jsou kompilovány v době buildu, aktualizace překladu znamená znovu spustit twenty dev:build (a znovu nasadit) stejně jako jakoukoli jinou změnu.

Překlady jsou kompilovány příkazy twenty dev:build (a twenty apply). Nepřetržité sledování twenty dev zobrazuje zdrojové řetězce, takže lokalizovaný výstup otestujte pomocí jednorázového buildu.

Potomci <Trans> s textem mohou být rozloženi na více řádků — prázdné znaky jsou zpracovány stejně, jako je zpracovává JSX, takže <Trans>Welcome\n back</Trans> i extrahovaný klíč se oba stanou Welcome back.