Traduzioni

Panoramica

Ogni stringa renderizzata dal pannello di amministrazione proviene da una chiave. Sono incluse sette lingue — inglese, spagnolo, tedesco, francese, italiano, portoghese e hindi — e un progetto può sovrascrivere qualsiasi chiave, aggiungere una propria lingua o tradurre i propri componenti utilizzando la stessa tabella.

Il funzionamento si basa su tre elementi:

<Rebase locale>	con quale lingua iniziare
<Rebase translations>	il testo associato a ciascuna chiave, per lingua
useTranslation()	per leggere una chiave dal tuo componente

Scegliere la lingua

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

locale è la lingua iniziale. Se un utente ne seleziona una dal menu delle lingue, tale scelta viene memorizzata nel suo browser e avrà la priorità rispetto alla prop alla visita successiva — modificare locale nel codice non sovrascrive l’impostazione dell’utente. Tutto ciò per cui Rebase non ha una stringa ricade sull’inglese (fallback) anziché renderizzare la chiave grezza.

Modificare il testo di una stringa

translations è indicizzato per lingua, poi per chiave. È parziale: basta indicare le poche chiavi che desideri modificare e tutto il resto rimarrà invariato.

<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>

La stessa struttura permette di aggiungere una lingua non inclusa di default in Rebase. Fornisci un set completo di chiavi e imposta locale su di essa:

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

Le chiavi omesse adotteranno l’inglese come fallback, quindi un set parziale risulterà comunque in una traduzione funzionante, senza causare errori.

Dove si trovano le chiavi

L’intera tabella è definita da RebaseTranslations — un’unica interfaccia contenente ogni chiave, in modo che il tuo editor possa completarle automaticamente e un errore di battitura diventi un errore di tipo. I valori in inglese si trovano in packages/app/src/locales/en.ts, che rappresenta il riferimento per il testo effettivo di ciascuna chiave.

I nomi seguono l’area di appartenenza: save, cancel, delete_confirmation_title per il pannello, studio_* per gli strumenti di sviluppo (studio_tool_sql, studio_group_database, studio_backups_denied_title).

Tradurre i propri componenti

useTranslation() ti mette a disposizione la stessa tabella da cui le tue viste, campi e azioni personalizzate possono leggere:

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

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

L’interpolazione usa la stessa sintassi {{name}} delle stringhe integrate:

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

Le tue chiavi personalizzate passano attraverso translations come tutte le altre — una chiave non dichiarata da Rebase viene comunque risolta, permettendoti di inserire le stringhe del tuo componente nella stessa tabella anziché gestire un secondo stack di i18n separato.

Inoltre, t restituisce la chiave stessa quando non viene trovata alcuna corrispondenza: una risposta trasparente che rende visibile nell’interfaccia utente una chiave mancante anziché lasciare uno spazio vuoto.

Le parole del kit UI

Da 0.25

Alcune stringhe appartengono a @rebasepro/ui stesso e non all’admin: i messaggi “No entries found”, “All 12 entries loaded” ed “Error loading data” delle viste elenco e card, il titolo di errore della tabella, i nomi della barra di ricerca e le date relative come “5m ago”. All’interno di un’app Rebase provengono dalle stesse traduzioni (no_entries_found, all_entries_loaded, error_loading_data_message, search, clear_search, relative_*) e seguono la lingua come ogni altra stringa.

Usando il kit da solo, parla inglese finché non lo avvolgi in un UiLabelsProvider. Ogni etichetta che ometti mantiene il suo valore predefinito inglese:

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() legge le etichette in vigore, e formatRelativeTime di @rebasepro/utils accetta labels: useUiLabels().relativeTime per esprimere una data nello stesso modo.

I nomi dei gruppi non sono etichette

La proprietà group di una AppView è un identificatore: il drawer la usa per comprimersi, la home page di Studio per ordinare gli elementi, e navigationGroupMappings per associarvi le icone. Tradurre questo valore nel punto in cui viene dichiarato compromette tutte e tre le funzionalità in ogni lingua diversa da quella utilizzata per la traduzione.

Dichiara il gruppo in inglese e lascia che sia l’intestazione a tradursi da sola — i gruppi integrati di Rebase hanno chiavi studio_group_* e vengono risolti per nome; un gruppo personalizzato verrà invece renderizzato esattamente così come scritto.

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

Prossimi passi

• Panoramica Frontend — l’elenco completo delle prop di <Rebase>
• Campi personalizzati — componenti che utilizzeranno useTranslation