Traduções

Visão geral

Cada string que o painel de administração renderiza vem de uma chave. Sete locales vêm integrados com ele — inglês, espanhol, alemão, francês, italiano, português e híndi — e um projeto pode sobrescrever qualquer chave, adicionar seu próprio idioma ou traduzir seus próprios componentes usando a mesma tabela.

Três elementos fazem o trabalho:

<Rebase locale>	em qual idioma iniciar
<Rebase translations>	o que cada chave diz, por locale
useTranslation()	leitura de uma chave a partir do seu próprio componente

Escolhendo o idioma

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

locale é o idioma inicial. Um leitor que escolhe um no menu de idiomas tem essa escolha lembrada em seu navegador, e ela prevalece sobre a prop na próxima visita — alterar locale no código não anula a configuração de alguém. Qualquer item para o qual o Rebase não tenha uma string recorre ao inglês (fallback) em vez de renderizar uma chave.

Alterando o que uma string diz

translations é indexado por locale, e depois por chave. Parcial: especifique apenas os poucos que deseja alterar e todo o restante permanecerá como estava.

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

A mesma estrutura adiciona um idioma que o Rebase não inclui por padrão. Forneça a ele um conjunto completo de chaves e defina locale para ele:

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

As chaves que você omitir recorrerão ao inglês (fallback), portanto, um conjunto parcial é uma tradução funcional, não quebrada.

Onde as chaves estão

A tabela inteira é RebaseTranslations — uma interface contendo todas as chaves, para que seu editor as autocomplete e um erro de digitação se torne um erro de tipo. Seus valores em inglês ficam em packages/app/src/locales/en.ts, que é a referência para o que cada chave realmente diz.

Os nomes seguem a superfície à qual pertencem: save, cancel, delete_confirmation_title para o painel, studio_* para as ferramentas de desenvolvimento (studio_tool_sql, studio_group_database, studio_backups_denied_title).

Traduzindo seus próprios componentes

useTranslation() fornece a mesma tabela que suas views, campos e ações customizadas podem ler:

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

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

A interpolação usa a mesma sintaxe {{name}} das strings integradas:

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

Suas próprias chaves passam por translations como quaisquer outras — uma chave que o Rebase não declara ainda é resolvida, para que você possa colocar as strings do seu componente na mesma tabela em vez de executar uma segunda stack de i18n em paralelo.

t também retorna a própria chave quando nada corresponde, o que é a resposta honesta e torna uma chave ausente visível na UI em vez de deixá-la em branco.

Nomes de grupos não são rótulos

O group de uma AppView é um identificador: o drawer se recolhe por ele, a página inicial do Studio ordena por ele, e navigationGroupMappings anexa ícones a ele. Traduzi-lo onde é declarado quebra todos os três em todos os idiomas, exceto naquele para o qual você traduziu.

Declare o grupo em inglês e deixe o cabeçalho se traduzir — os próprios grupos do Rebase têm chaves studio_group_* e são consultados pelo nome; um grupo personalizado seu renderiza conforme escrito.

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

Próximos passos

• Frontend Overview — as props de <Rebase> na íntegra
• Custom Fields — componentes que precisarão de useTranslation