Saltar para o conteúdo principal
Os aplicativos Twenty são escritos em inglês: as strings no seu código-fonte e no manifesto são o texto-fonte em inglês, en é a localidade de origem a partir da qual você traduz, e qualquer localidade deixada sem tradução reverte para essa localidade. Seu aplicativo tem dois tipos de texto traduzível, e ambos passam pelo mesmo catálogo locales/:
  • Rótulos do manifesto — nomes de objetos e campos, títulos de exibição, itens de menu e outras strings declaradas nos metadados do seu aplicativo.
  • Front-component strings — A interface do usuário que processa seus componentes frontais do React.
Você marca as strings traduzíveis, extraa-as em catálogos por localidade, traduza os catálogos, e a compilação serve a linguagem certa para o usuário atual — sem asas extras.

​
Marcando strings front-component

Importe os auxiliares de tradução de vinte e 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>
  );
};

​
Quando usar qual

  • <Trans>…</Trans> — texto estático em JSX. Use as propriedades message evalues para interpolação (<Trans message="Hi {name}" values={{ name }} />); interpolar diretamente nos filhos não é estaticamente extracurável.
  • useTranslate().t — strings dinâmicas dentro de um componente. Rerenderiza quando o usuário muda de linguagem. Prefere isso dentro de renderização.
  • t(...) (importado diretamente) — tradução ávida utilizável em qualquer lugar, incluindo manipuladores de eventos, auxiliares e escopo de módulo — não apenas dentro de renderização.
  • msg(...) — um descritor preguiçoso para frases declaradas como dados (constantes, config). Resolva-o mais tarde com t(descriptor).

​
Contexto

Passe context para desambiguar sequências de caracteres de origem idênticas que traduzem de forma diferente: 
t({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>

​
Extraindo e traduzindo

Execute o comando extracto a partir do diretório do seu aplicativo: 
twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
Extração coleta as duas strings do seu manifesto e t()/msg()/\<Trans> do código do seu front-component em locales/<locale>. son`, chave por string de origem. Preencha as traduções: 
// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}
Espaços reservados como {name} são substituídos no tempo de execução — mantenha-os na tradução . Qualquer cadeia de caracteres deixada vazia retorna ao texto de origem.

​
Como ele funciona

twenty dev:build compila os catálogos e fornece o idioma correto para o usuário atual: os rótulos do manifesto são resolvidos no lado do servidor e os catálogos de componentes de front-end são incorporados em cada pacote de componente. No tempo de execução, um componente lê a localidade de seu contexto de execução (o idioma atual do host) e resolve cada seqüência de caracteres contra seu catálogo, voltando à fonte quando uma tradução estiver faltando. Mudar idioma no host renderiza novamente as strings \<Trans>e useTranslate().t` ao vivo. Como os catálogos são compilados no tempo de construção, atualizar uma tradução significa reexecutar vinte dev:build (e redistribuir), o mesmo que qualquer outra mudança.
As traduções são compiladas por vinte dev:build (e vinte aplicam). O relógio contínuo vinte dev mostra strings de origem, então teste saída localizada com uma compilação única.
<Trans> Crianças de texto podem span várias linhas — espaço em branco é recolhido o da mesma forma que JSX o colapsa, so <Trans>Bem-vindo\n de volta</Trans> e a chave extraída ambas se tornam Bem-vindo de volta.