Skip to main content
Las aplicaciones de Twenty están creadas en inglés: las cadenas de tu código fuente y del manifiesto son el texto original en inglés, en es la configuración regional de origen desde la que traduces y cualquier configuración regional que quede sin traducir volverá a esa configuración. Tu aplicación tiene dos tipos de texto traducible, y ambos pasan por el mismo catálogo locales/:
  • Etiquetas del manifiesto: nombres de objetos y campos, títulos de vistas, elementos de menú y otras cadenas declaradas en los metadatos de tu aplicación.
  • Cadenas de componentes delanteros — la interfaz de texto de tus componentes frontales de React.
Marcas las cadenas traducibles, extralas en catálogos por localidad, traduce esos catálogos, y la construcción sirve el idioma adecuado para el usuario actual — no hay cableado extra.

​
Marcando cadenas de componentes frontales

Importar los ayudantes de traducción de twenty-sdk/front-component:

​
Cuándo usar qué

  • Trans — texto estático en JSX. Usa las props message y values para la interpolación, como en Trans message="Hi {name}" values={{ name }}; la interpolación directamente en los children no se puede extraer de forma estática.
  • useTranslate().t — cadenas dinámicas dentro de un componente. Se vuelve a procesar cuando el usuario cambia de idioma. Preferir esto dentro del render.
  • t(...) (importado directamente) — una traducción entera utilizable en cualquier lugar, incluyendo controladores de eventos, ayudantes y ámbito del módulo — no solo dentro del render.
  • msg(...) — un descriptor perezoso para cadenas declaradas como datos (constantes, configuración ). Resuelva más tarde con t(descriptor).

​
Contexto

Pase context para desambiguar cadenas de origen idénticas que traduzcan de forma diferente:

​
Extrayendo y traduciendo

Ejecutar el comando de extracción desde el directorio de la aplicación:
La extracción recopila tanto las etiquetas de tu manifest como las cadenas de t()/msg()/Trans de tu código fuente de front-component en locales/\<locale>.json, indexadas por la cadena de origen. Rellena las traducciones:
Los marcadores de posición como {name} se sustituyen en tiempo de ejecución — manténgalos en la traducción . Cualquier cadena que quede vacía regresa al texto original.

​
Cómo funciona

twenty dev:build compila los catálogos y sirve el idioma correcto para el usuario actual: las etiquetas del manifiesto se resuelven del lado del servidor y los catálogos de front-component se incluyen en cada paquete de componente. En tiempo de ejecución, un componente lee la configuración regional desde su contexto de ejecución (el idioma actual del host) y resuelve cada cadena contra su catálogo, volviendo a la fuente cuando falta una traducción . Cambiar el idioma en el host vuelve a renderizar en tiempo real las cadenas de Trans y useTranslate().t. Debido a que los catálogos se compilan en tiempo de construcción, actualizar una traducción significa volver a ejecutar twenty dev:build (y redesplegar), lo mismo que cualquier otro cambio.
Las traducciones son compiladas por twenty dev:build (y veinte aplicaciones). El reloj continuo veinte dev muestra las cadenas de origen, así que prueba la salida localizada con una compilación única.
Los nodos de texto hijos de Trans pueden abarcar varias líneas; los espacios en blanco se colapsan de la misma manera en que JSX los colapsa, por lo que ambos se extraen a la clave Welcome back: