Traductions

Vue d’ensemble

Chaque chaîne affichée par le panneau d’administration provient d’une clé. Sept langues sont fournies par défaut — anglais, espagnol, allemand, français, italien, portugais et hindi — et un projet peut surcharger n’importe quelle clé, ajouter sa propre langue ou traduire ses propres composants à l’aide de la même table.

Trois éléments réalisent ce travail :

<Rebase locale>	la langue de départ
<Rebase translations>	la valeur de chaque clé, par locale
useTranslation()	la lecture d’une clé depuis votre propre composant

Choisir la langue

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

locale est la langue initiale. Si un utilisateur en choisit une dans le menu des langues, ce choix est mémorisé dans son navigateur et prévaut sur la prop lors de sa prochaine visite — modifier locale dans le code n’outrepasse pas les paramètres de l’utilisateur. Tout ce pour quoi Rebase n’a pas de chaîne bascule par défaut vers l’anglais au lieu d’afficher une clé brute.

Modifier le texte d’une chaîne

translations est indexé par locale, puis par clé. Il est partiel : indiquez simplement la poignée de clés que vous souhaitez modifier et tout le reste reste inchangé.

<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 même structure permet d’ajouter une langue non fournie par Rebase. Fournissez-lui un jeu complet de clés et définissez locale sur celle-ci :

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

Les clés que vous omettez basculent par défaut vers l’anglais, de sorte qu’un ensemble partiel constitue une traduction fonctionnelle, et non cassée.

Où se trouvent les clés

L’ensemble de la table est RebaseTranslations — une interface unique contenant chaque clé, permettant à votre éditeur de les auto-compléter et transformant toute faute de frappe en erreur de type. Ses valeurs en anglais se trouvent dans packages/app/src/locales/en.ts, qui sert de référence pour connaître le texte réel de chaque clé.

Les noms correspondent à la surface à laquelle ils appartiennent : save, cancel, delete_confirmation_title pour le panneau d’administration, studio_* pour les outils de développement (studio_tool_sql, studio_group_database, studio_backups_denied_title).

Traduire vos propres composants

useTranslation() vous donne accès à la même table que vos vues, champs et actions personnalisés peuvent lire :

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

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

L’interpolation utilise la même syntaxe {{name}} que les chaînes intégrées :

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

Vos propres clés passent par translations comme n’importe quelles autres — une clé non déclarée par Rebase est tout de même résolue, ce qui vous permet de placer les chaînes de vos composants dans la même table plutôt que d’exécuter une seconde stack d’i18n en parallèle.

t renvoie également la clé elle-même lorsque rien ne correspond, ce qui constitue une réponse honnête et rend une clé manquante visible dans l’interface utilisateur plutôt que de laisser un espace vide.

Les noms de groupes ne sont pas des libellés

Le group d’une AppView est un identifiant : le tiroir de navigation (drawer) se replie en fonction de lui, la page d’accueil de Studio s’ordonne selon lui, et navigationGroupMappings lui associe des icônes. Le traduire à l’endroit où il est déclaré casse ces trois fonctionnalités dans toutes les langues, à l’exception de celle dans laquelle vous l’avez traduit.

Déclarez le groupe en anglais et laissez l’en-tête se traduire de lui-même — les groupes propres à Rebase disposent de clés studio_group_* et sont recherchés par nom ; un groupe personnalisé s’affiche tel qu’il a été écrit.

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

Prochaines étapes

• Vue d’ensemble du Frontend — l’ensemble complet des props de <Rebase>
• Champs personnalisés — des composants qui auront besoin de useTranslation