Traducciones

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:

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

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:

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

Las cadenas contextuales aparecen en los catálogos de configuración regional como un grupo indexado por su contexto: "\<context>": { "\<message>": "\<translation>" }. Las etiquetas del manifiesto son contextuales por construcción: cada una lleva el metadato del rol que desempeña (objectMetadata.labelSingular, fieldMetadata.label, view.name, …), por lo que la misma palabra puede traducirse de manera diferente como nombre de objeto y como nombre de vista.

Extrayendo y traduciendo

Ejecutar el comando de extracción desde el directorio de la aplicación:

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

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:

// 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"
  }
}

Las cadenas sin contexto son entradas planas; las cadenas contextuales —incluida cada etiqueta de manifiesto— están anidadas bajo su clave de contexto. 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. Las etiquetas de manifiesto se compilan en cada sincronización — twenty dev:build, twenty apply y también en el modo de observación continuo twenty dev —, por lo que basta con editar un archivo de configuración regional y sincronizar para ver el nuevo texto. Los catálogos de componentes del front-end se incorporan en cada paquete de componentes durante la compilación, por lo que cambiar uno de ellos sigue implicando volver a ejecutar twenty dev:build (y volver a implementar). 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:

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

Resumen

Aplicaciones

API

Autoalojamiento

Contribuir

Marcando cadenas de componentes frontales

Cuándo usar qué

Contexto

Extrayendo y traduciendo

Cómo funciona

​Marcando cadenas de componentes frontales

​Cuándo usar qué

​Contexto

​Extrayendo y traduciendo

​Cómo funciona

Marcando cadenas de componentes frontales

Cuándo usar qué

Contexto

Extrayendo y traduciendo

Cómo funciona