Traduceri

Prezentare generală

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 din, 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 de caractere ale componentelor front-end — textul din interfața utilizator pe care îl redau componentele React front-end.

Marcați șirurile de caractere traductibile, le extrageți în cataloage pentru fiecare localizare, traduceți aceste cataloage, iar compilarea servește limba potrivită pentru utilizatorul curent — fără configurare suplimentară.

Marcarea șirurilor din componentele front-end

Importă ajutătoarele de traducere din 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>
  );
};

Când să utilizați ce

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. Se rerandează când utilizatorul schimbă limba. Preferați această opțiune în interiorul funcției render.
t(...) (importat direct) — traducere imediată utilizabilă oriunde, inclusiv în gestionarele de evenimente, funcțiile utilitare și domeniul modulului — nu doar în interiorul funcției render.
msg(...) — un descriptor cu evaluare întârziată pentru șiruri declarate ca date (constante, configurare). Rezolvați-l mai târziu cu t(descriptor).

Context

Transmiteți context pentru a dezambigua șirurile sursă identice care se traduc în mod diferit:

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

Șirurile contextuale apar în cataloagele de localizare ca un grup indexat după contextul lor: "\<context>": { "\<message>": "\<translation>" }. Etichetele din manifest sunt contextuale prin construcție — fiecare poartă rolul de metadată pe care îl joacă (objectMetadata.labelSingular, fieldMetadata.label, view.name, …), astfel încât același cuvânt poate fi tradus diferit ca nume de obiect și ca nume de vizualizare.

Extragerea și traducerea

Rulați comanda de extragere din directorul aplicației dvs.:

twenty app translations extract                  # collect strings into locales/en.json
twenty app 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ă. Completați traducerile:

// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées",
  "door": {
    "Open": "Ouvrir"
  },
  "objectMetadata.labelSingular": {
    "Postcard": "Carte postale"
  }
}

Șirurile fără context sunt intrări simple; șirurile contextuale — inclusiv fiecare etichetă din manifest — sunt îmbricate sub cheia lor de context. Substituenți precum {name} sunt înlocuiți în timpul execuției — păstrați-i în traducere. Orice șir lăsat gol revine la textul sursă.

Cum rulează

twenty app build compilează cataloagele și servește limba potrivită pentru utilizatorul curent: etichetele manifestului sunt rezolvate pe partea de server, iar cataloagele componentelor front-end sunt incluse în fiecare pachet de componente. În timpul execuției, o componentă citește setarea regională din contextul său de execuție (limba curentă a gazdei) și rezolvă fiecare șir în raport cu catalogul său, revenind la sursă atunci când lipsește o traducere. Schimbarea limbii în gazdă reafișează în timp real șirurile Trans și useTranslate().t. Etichetele manifestului sunt compilate la fiecare sincronizare — twenty app build, twenty app apply și monitorizarea continuă twenty app dev deopotrivă — astfel încât editarea unui fișier de localizare și sincronizarea sunt suficiente pentru a vedea textul nou. Cataloagele componentelor front-end sunt incluse în fiecare pachet de componente la momentul compilării, astfel încât modificarea unuia dintre acestea înseamnă totuși rerularea twenty app build (și redeployarea).

Preluarea traducerilor

twenty app pull scrie traducerile publicate ale unei aplicații înapoi în locales/. Un catalog publicat este indexat după ID-ul mesajului, astfel încât preluarea recuperează forma lizibilă numai pentru șirurile a căror sursă o poate vedea: etichetele metadatelor pe care le-a preluat și șirurile t()/msg()/Trans ale componentelor front-end prezente în proiect. Toate celelalte sunt păstrate ca atare în locales/compiled/\<locale>.json, indexate după ID-ul mesajului. Procesul de build îmbină acele fișiere în catalog (o intrare din locales/\<locale>.json are prioritate față de una compilată cu același id), twenty app translations extract le lasă neatinse, iar fiecare pull le rescrie, astfel încât se micșorează pe măsură ce mai mult din codul sursă al aplicației ajunge în arbore. Nu le editați manual; traduceți în locales/\<locale>.json. Un proiect fără un folder locales/ nu indică nimic despre traduceri, astfel încât o sincronizare din acesta lasă neatinse toate traducerile deja publicate de aplicație. Pentru a elimina intenționat traducerile publicate, păstrați folderul și ștergeți fișierele de setări regionale din el: un folder locales/ care nu compilează într-o setare regională este o declarație explicită, iar sincronizarea elimină corespunzător. 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>

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Marcarea șirurilor din componentele front-end

Când să utilizați ce

Context

Extragerea și traducerea

Cum rulează

Preluarea traducerilor

​Prezentare generală

​Marcarea șirurilor din componentele front-end

​Când să utilizați ce

​Context

​Extragerea și traducerea

​Cum rulează

​Preluarea traducerilor

Prezentare generală

Marcarea șirurilor din componentele front-end

Când să utilizați ce

Context

Extragerea și traducerea

Cum rulează

Preluarea traducerilor