Übersetzungen

Übersicht

Jede Zeichenfolge, die das Admin-Panel anzeigt, stammt von einem Schlüssel. Sieben Locales werden standardmäßig mitgeliefert — Englisch, Spanisch, Deutsch, Französisch, Italienisch, Portugiesisch und Hindi — und ein Projekt kann beliebige Schlüssel überschreiben, eine eigene Sprache hinzufügen oder eigene Komponenten anhand derselben Tabelle übersetzen.

Drei Elemente übernehmen die Arbeit:

<Rebase locale>	welche Sprache zu Beginn verwendet werden soll
<Rebase translations>	welcher Text zu welchem Schlüssel gehört, pro Locale
useTranslation()	Auslesen eines Schlüssels aus Ihrer eigenen Komponente

Sprache auswählen

<Rebase client={client} authController={authController} locale="es">
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

locale ist die ursprüngliche Sprache. Wenn ein Benutzer eine Sprache aus dem Sprachmenü auswählt, wird diese Auswahl im Browser gespeichert und hat beim nächsten Besuch Vorrang vor der Prop — das Ändern von locale im Code überschreibt die Einstellung eines Benutzers nicht. Alles, wofür Rebase keine Zeichenfolge hat, fällt auf Englisch zurück, anstatt einen Schlüssel anzuzeigen.

Ändern von Zeichenfolgen

translations ist nach Locale und dann nach Schlüssel strukturiert. Partiell: Geben Sie nur die wenigen an, die Sie ändern möchten, und alles andere bleibt wie zuvor.

<Rebase
    client={client}
    authController={authController}
    translations={{
        en: { save: "Publish", delete_confirmation_title: "Unpublish?" },
        es: { save: "Publicar", delete_confirmation_title: "¿Despublicar?" }
    }}
>
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

Derselbe Aufbau fügt eine Sprache hinzu, die Rebase nicht standardmäßig mitliefert. Übergeben Sie einen vollständigen Schlüsselsatz und setzen Sie locale darauf:

<Rebase
    client={client}
    authController={authController}
    locale="nl"
    translations={{ nl: { save: "Opslaan", cancel: "Annuleren" } }}
>
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

Schlüssel, die Sie weglassen, fallen auf Englisch zurück, sodass ein partieller Satz eine funktionierende Übersetzung darstellt und keine fehlerhafte.

Wo die Schlüssel liegen

Die gesamte Tabelle ist RebaseTranslations — ein Interface mit jedem einzelnen Schlüssel, sodass Ihr Editor Autovervollständigung bietet und ein Tippfehler ein Typfehler ist. Die englischen Werte befinden sich in packages/app/src/locales/en.ts, was als Referenz dafür dient, was jeder Schlüssel tatsächlich bedeutet.

Die Namen richten sich nach dem Bereich, zu dem sie gehören: save, cancel, delete_confirmation_title für das Panel, studio_* für die Entwicklertools (studio_tool_sql, studio_group_database, studio_backups_denied_title).

Eigene Komponenten übersetzen

useTranslation() bietet Ihnen dieselbe Tabelle, die auch Ihre benutzerdefinierten Views, Felder und Aktionen auslesen können:

import { useTranslation } from "@rebasepro/app";

function PublishButton() {
    const { t } = useTranslation();
    return <Button>{t("save")}</Button>;
}

Die Interpolation verwendet dieselbe {{name}}-Syntax wie die integrierten Zeichenfolgen:

t("add_to_field", { fieldName: "Tags" });

Ihre eigenen Schlüssel werden wie alle anderen über translations übergeben — ein Schlüssel, den Rebase nicht deklariert, wird dennoch aufgelöst. Sie können also die Zeichenfolgen Ihrer Komponente in dieselbe Tabelle einfügen, anstatt einen zweiten i18n-Stack daneben zu betreiben.

t gibt außerdem den Schlüssel selbst zurück, wenn nichts übereinstimmt, was das ehrlichste Ergebnis darstellt und einen fehlenden Schlüssel in der UI sichtbar macht, anstatt nichts anzuzeigen.

Die eigenen Wörter des UI-Kits

Seit 0.25

Einige Zeichenfolgen gehören zu @rebasepro/ui selbst und nicht zum Admin: das „No entries found“, „All 12 entries loaded“ und „Error loading data“ der Listen- und Kartenansichten, der Fehlertitel der Tabelle, die Namen der Suchleiste und relative Datumsangaben wie „5m ago“. In einer Rebase-App stammen sie aus denselben Übersetzungen (no_entries_found, all_entries_loaded, error_loading_data_message, search, clear_search, relative_*) und folgen der Sprache wie jede andere Zeichenfolge.

Wenn Sie das Kit allein verwenden, spricht es Englisch, bis Sie es in einen UiLabelsProvider einbetten. Jedes Label, das Sie weglassen, behält seinen englischen Standardwert:

import { UiLabelsProvider } from "@rebasepro/ui";

<UiLabelsProvider labels={{
    noEntriesFound: "Nessuna voce trovata",
    allEntriesLoaded: (count) => `Tutte le ${count} voci caricate`,
    relativeTime: { minutesAgo: (count) => `${count} min fa` }
}}>
    <ListView data={rows} renderRow={renderRow}/>
</UiLabelsProvider>

useUiLabels() liest die gültigen Labels, und formatRelativeTime aus @rebasepro/utils nimmt labels: useUiLabels().relativeTime, um ein Datum auf dieselbe Weise auszudrücken.

Gruppennamen sind keine Labels

Das group-Feld einer AppView ist ein Bezeichner: Die Navigationsleiste klappt danach ein, die Studio-Startseite ordnet danach, und navigationGroupMappings weist ihm Icons zu. Wird es dort übersetzt, wo es deklariert ist, zerbricht dies in allen drei Fällen in jeder Sprache außer derjenigen, in die übersetzt wurde.

Deklarieren Sie die Gruppe auf Englisch und lassen Sie die Überschrift sich selbst übersetzen — Rebase-eigene Gruppen haben studio_group_*-Schlüssel und werden nach Namen nachgeschlagen; eine eigene Gruppe wird genau so gerendert, wie sie geschrieben wurde.

// Right: the name is stable, the heading is localized for the built-in groups.
{ slug: "queues", name: "Queues", group: "Compute", view: <QueuesView/> }

Nächste Schritte

• Frontend-Übersicht — die <Rebase>-Props im Detail
• Benutzerdefinierte Felder — Komponenten, die useTranslation nutzen möchten