Skip to main content
Twenty-Apps werden auf Englisch erstellt: Die Zeichenketten in Ihrem Quellcode und im Manifest sind der englische Ausgangstext, en ist das Quell‑Locale, aus dem Sie übersetzen, und jedes Locale, das unübersetzt bleibt, fällt darauf zurück. Ihre App enthält zwei Arten von übersetzbarem Text, und beide laufen durch denselben locales/-Katalog:
  • Manifest-Labels – Objekt- und Feldnamen, Sichtetitel, Menüpunkte und andere Zeichenketten, die in den Metadaten Ihrer App deklariert sind.
  • Front-Komponenten-Zeichenketten – der UI-Text, den Ihre React-Front-Komponenten rendern.
Sie markieren die übersetzbaren Zeichenketten, extrahieren sie in sprachspezifische Kataloge, übersetzen diese Kataloge, und der Build stellt die richtige Sprache für den aktuellen Benutzer bereit – ohne zusätzlichen Aufwand.

​
Markieren von Front-Komponenten-Zeichenketten

Importieren Sie die Übersetzungshelfer aus twenty-sdk/front-component:

​
Wann Sie welches verwenden sollten

  • Trans – statischer Text in JSX. Verwenden Sie die Props message und values zur Interpolation, wie in Trans message="Hi {name}" values={{ name }}; eine direkte Interpolation in den Children ist nicht statisch extrahierbar.
  • useTranslate().t – dynamische Zeichenketten innerhalb einer Komponente. Wird neu gerendert, wenn der Benutzer die Sprache wechselt. Bevorzugen Sie dies innerhalb von Render-Funktionen.
  • t(...) (direkt importiert) – sofortige Übersetzung, die überall verwendet werden kann, einschließlich Event-Handlern, Helfern und im Modul-Scope – nicht nur innerhalb von Render-Funktionen.
  • msg(...) – ein Lazy-Descriptor für Zeichenketten, die als Daten (Konstanten, Konfiguration) deklariert werden. Lösen Sie ihn später mit t(descriptor) auf.

​
Kontext

Übergeben Sie context, um identische Quellzeichenketten zu unterscheiden, die sich unterschiedlich übersetzen lassen:
Kontextbezogene Zeichenketten erscheinen in Gebietsschema-Katalogen als Gruppe, die über ihren Kontext geschlüsselt ist: "\<context>": { "\<message>": "\<translation>" }. Manifestbeschriftungen sind ihrer Konstruktion nach kontextabhängig – jede von ihnen trägt die Rolle, die sie in den Metadaten spielt (objectMetadata.labelSingular, fieldMetadata.label, view.name, …), sodass dasselbe Wort sich als Objektname und als Ansichtsname unterschiedlich übersetzen kann.

​
Extrahieren und Übersetzen

Führen Sie den Extract-Befehl aus Ihrem App-Verzeichnis aus:
Die Extraktion sammelt sowohl Ihre Manifest-Labels als auch die t()-/msg()-/Trans- Zeichenketten aus Ihrem Front-Komponenten-Quellcode in locales/\<locale>.json, indiziert nach der Quellzeichenkette. Füllen Sie die Übersetzungen aus:
Kontextfreie Zeichenketten sind flache Einträge; kontextbezogene Zeichenketten – einschließlich jeder Manifestbeschriftung – sind unter ihrem Kontextschlüssel verschachtelt. Platzhalter wie {name} werden zur Laufzeit ersetzt – behalten Sie sie in der Übersetzung bei. Jede Zeichenkette, die leer bleibt, fällt auf den Quelltext zurück.

​
Wie es ausgeführt wird

twenty dev:build kompiliert die Kataloge und stellt die richtige Sprache für den aktuellen Benutzer bereit: Manifest-Labels werden serverseitig aufgelöst und Front-Komponenten-Kataloge werden in jedes Komponenten-Bundle eingebunden. Zur Laufzeit liest eine Komponente die Locale aus ihrem Ausführungskontext (der aktuellen Sprache des Hosts) und löst jede Zeichenkette gegen ihren Katalog auf, wobei auf die Quelle zurückgegriffen wird, wenn eine Übersetzung fehlt. Das Umschalten der Sprache im Host rendert Trans- und useTranslate().t-Zeichenketten live neu. Manifest-Bezeichnungen werden bei jeder Synchronisierung kompiliert – bei twenty dev:build, twenty apply und der fortlaufenden twenty dev-Überwachung –, sodass das Bearbeiten einer Locale-Datei und das Synchronisieren ausreichen, um den neuen Text zu sehen. Front-Komponentenkataloge werden zur Build-Zeit in jedes Komponenten-Bundle integriert, sodass das Ändern eines davon weiterhin das erneute Ausführen von twenty dev:build (und ein erneutes Deployment) erfordert. Trans-Text-Children können sich über mehrere Zeilen erstrecken – Leerraum wird auf dieselbe Weise zusammengefasst, wie JSX ihn zusammenfasst, sodass beide zum Schlüssel Welcome back extrahiert werden: