Skip to main content
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:

​
Quando usar qual

  • Trans — texto estático em JSX. Use as props message e values para interpolação, como em Trans message="Hi {name}" values={{ name }}; a interpolação diretamente em children não pode ser extraída estaticamente.
  • 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:

​
Extraindo e traduzindo

Execute o comando extracto a partir do diretório do seu aplicativo:
A extração coleta tanto os rótulos do seu manifesto quanto as strings de t()/msg()/Trans no código-fonte do seu front-component em locales/\<locale>.json, indexadas pela string de origem. Preencha as traduçõ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 o idioma no host faz com que as strings de Trans e useTranslate().t sejam renderizadas novamente em tempo real. 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.
O conteúdo de texto (children) de Trans pode se estender por várias linhas — os espaços em branco são colapsados da mesma forma que o JSX os colapsa, portanto, ambos são extraídos para a chave Welcome back: