Traduceri

Aplicațiile Twenty sunt create în engleză: șirurile din sursă și din manifest sunt textul sursă în engleză, en este localizarea sursă din care traduci, iar orice localizare lăsată netradusă revine implicit la aceasta. Aplicația ta are două tipuri de text traducibil și ambele trec prin același catalog locales/:

Etichete de manifest — nume de obiecte și câmpuri, titluri de vizualizări, elemente de meniu și alte șiruri declarate în metadatele aplicației tale.
Șiruri componentă-față - textul UI al componentelor dvs. React din față.

Marchează șirurile traduse, le extrag în cataloage per-localizare, traduce acele cataloage, iar clădirea servește limba corectă pentru utilizatorul curent* fără cableri suplimentare.

Marcarea sirurilor componentei frontale

Importă ajutătoarele de traducere din douăzeci de aplicații/front-componente:

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>
  );
};

Când să utilizaţi care

Trans — text static în JSX. Folosește proprietățile message și values pentru interpolare, ca în Trans message="Hi {name}" values={{ name }}; interpolarea direct în elementele copil nu poate fi extrasă static.
useTranslate().t - șiruri dinamice în interiorul unei componente. Re-randează atunci când utilizatorul schimbă limba. Preferă acest lucru în redare.
t(...) (importat direct) - traducerea mai ușoară oriunde, inclusiv manipulatorii de evenimente, ajutoarele și domeniul de aplicare al modulului - nu numai în randare.
msg(...) — un descriptor leneș pentru șiruri declarate ca date (constante, config). Rezolvați-l mai târziu cu t(descriptor).

Context

Treceți context pentru a disambigua șirurile sursă identice care traduc în mod diferit:

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

Extragerea și traducerea

Rulează comanda de extragere din directorul aplicației:

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

Procesul de extragere colectează atât etichetele manifestului, cât și șirurile t()/msg()/Trans din sursa front-component în locales/\<locale>.json, indexate după șirul sursă. Completează traducerile:

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

Localnicii ca {name} sunt substituiți la timp - țineți-le în traducerea . Orice şir rămas gol se întoarce la textul sursă.

Cum rulează

douăzeci de dev:build compilează cataloagele şi serveşte limba corectă pentru utilizatorul curent : etichetele manifest sunt rezolvate pe server, iar cataloagele de tip front-component sunt copite în fiecare pachet de componente. La runtime, o componentă citește localizarea din contextul de execuție (limba curentă a gazdei) și rezolvă fiecare șir din catalog, revenind la sursă atunci când lipsește o traducere . Schimbarea limbii în gazdă reafișează în timp real șirurile Trans și useTranslate().t. Deoarece cataloagele sunt compilate la ora de construcție, actualizarea unei traduceri înseamnă repornirea douăzeci dev:build (și redistribuirea), la fel ca orice altă schimbare.

Traducerile sunt compilate de douăzeci dev:build (și douăzeci apply). ceasul continuu douăzeci de dev arată șirurile sursă, așa că testează rezultatul localizat cu o singură construcție.

Elementele text copil ale Trans pot acoperi mai multe linii — spațiile albe sunt comprimate în același mod în care JSX le comprimă, astfel încât ambele variante sunt extrase cu cheia Welcome back:

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

Prezentare generală

Aplicații

API

Autogazda

Contribuie

Marcarea sirurilor componentei frontale

Când să utilizaţi care

Context

Extragerea și traducerea

Cum rulează

​Marcarea sirurilor componentei frontale

​Când să utilizaţi care

​Context

​Extragerea și traducerea

​Cum rulează

Marcarea sirurilor componentei frontale

Când să utilizaţi care

Context

Extragerea și traducerea

Cum rulează