Adicione strings localizáveis aos temas e componentes de tema

[Discourse]

Para aqueles que desejam adicionar idiomas e traduções personalizadas a um tema ou componente de tema do Discourse, agora é possível incluir strings localizadas, que ficam disponíveis para uso em componentes de interface. As traduções são armazenadas no mesmo formato que as traduções do núcleo/plugin e podem ser usadas de maneira quase idêntica.

Os temas podem fornecer arquivos de tradução no formato /locales/{locale}.yml. Esses arquivos devem ser YAML válidos, com uma única chave de nível superior igual ao idioma sendo definido. Eles podem ser definidos usando o CLI discourse_theme, importando um .tar.gz, instalando a partir de um repositório GIT ou por meio do editor em theme-creator.discourse.org.

Um exemplo de arquivo de idioma pode ser:

pt_BR:
  theme_metadata:
    description: "Esta é uma descrição para o meu tema"
    settings:
      theme_setting_name: "Esta é uma descrição para a configuração `theme_setting_name`"
      another_theme_setting_name:
        description: "Esta é uma descrição para a configuração `another_theme_setting_name`"
  sidebar:
    welcome: "Bem-vindo"
    back: "voltar"
    welcome_subhead: "Ficamos felizes por você estar aqui!"
    likes_header: "Compartilhe o carinho"
    badges_header: "Suas melhores medalhas"
    full_profile: "Ver seu perfil completo"

Os administradores podem substituir chaves individuais por tema na interface de usuário em /admin/customize/themes. O fallback é tratado da mesma forma que no núcleo, então é aceitável ter traduções incompletas para idiomas que não sejam o inglês, pois eles utilizarão as chaves em inglês.

Em segundo plano, essas traduções são armazenadas junto com as traduções do núcleo, sob um namespace específico do tema. Por exemplo:

theme_translation.{theme_id}.sidebar.welcome

Você nunca deve codificar o theme_id diretamente no código do seu tema. Para construir dinamicamente a chave de tradução, use o helper themePrefix:

import { i18n } from "discourse-i18n";
import { themePrefix } from "virtual:theme";

// Em código JS:
const result = i18n(themePrefix("minha_chave_de_traducao"));
console.log("Do Javascript", result);

// Em uma tag de template:
<template>{{i18n (themePrefix "blah")}}</template>

Para um exemplo completo de como usar traduções em um tema, confira o tema Fakebook de @awesomerobot: GitHub - discourse/Fakebook · GitHub

---

Este documento está sob controle de versão - sugira alterações no GitHub.

[evantill (Eric Vantillard)]

Como usar traduções de tema no CSS? Sei que podemos usar parâmetros de tema, mas preciso de traduções de tema.

[david (David Taylor)]

Não é possível, pois eles estão disponíveis apenas em templates e JavaScript. O mesmo vale para traduções do núcleo/plugins.

Idealmente, refatore para que a string seja definida em um template. Mas se você realmente precisar de uma string personalizável em um arquivo CSS, pode usar as configurações do tema: Developing Discourse Themes & Theme Components

[evantill (Eric Vantillard)]

E se eu usar a configuração do tema, é possível traduzi-la?

[david (David Taylor)]

Não, não em vários idiomas, mas permitiria que administradores personalisassem para o site deles.

[Mikhail_Tyuftyaev]

Olá a todos.
Estou redefinindo o modelo upload-selector.hbs
Quero adicionar uma frase traduzível.
Criei uma nova variável upload_selector.upload_images
Por exemplo

Por favor, me diga o que fazer a seguir?

[Theudebart (Marcel Patzsch)]

Olá,

quando tento essa técnica no criador de temas do Discourse (veja aqui), tudo funciona perfeitamente e conforme explicado neste post.

No entanto, se eu importar o mesmo tema no meu próprio servidor, apenas " [en.theme_translations.12.blog]" aparece. Além disso, na página de configurações do tema, não há uma seção “Traduções do Tema” como no criador de temas.

Realmente não sei mais onde procurar esse erro. Alguém tem alguma dica para mim?

[Edit]
Estou usando o Discourse 2.6.7 ( [f73cdbbd2f ] ) em um ambiente Docker.

[IAmGav (Gavin Perch)]

@Theudebart

Estou usando o Discourse 2.6.7 ( [f73cdbbd2f ] ) em um ambiente Docker.

Você pode atualizar o Discourse?

Você está usando uma versão antiga.

[Theudebart (Marcel Patzsch)]

@IAmGav

Você pode atualizar o Discourse?

Você está usando uma versão antiga.

Sim, estou tentando isso. Isso é outra coisa com que preciso de ajuda, mas não quero postar aqui; isso merece outro tópico.

De qualquer forma, achei que não deveria ser um problema, já que o recurso de tradução foi incluído na versão 2.2.0.beta9, veja commit.

[Jerome_Hordies]

Olá, desculpe antecipadamente por uma pergunta de novato.
Criei um cabeçalho apenas com HTML e CSS

        <div class="top-navbar">
         <span class="j_menu_item" ><a href="https://www.example.com/download">Download</a></span>     
        </div>

E então quero traduzir a palavra “Download”
Criei o arquivo de tradução em inglês

en: 
  top-navbar: 
    download: "Yeah"

Então mudei o código HTML como no exemplo do Facebook

    <script type="text/x-handlebars" data-template-name="/connectors/discovery-below/sidebar">
        <div class="top-navbar">
         <span class="j_menu_item" ><a href="https://www.example.com/download">{{i18n (theme-prefix "top-navbar.download")}}</a></span>     
        </div>
    </script>

Isso traduz e imprime “Yeah”, mas quebra meu layout, acho que é porque estou usando “/connectors/discovery-below/sidebar”. Eu só quero aplicar minha tradução sem mexer em nenhum template, mas não entendo como aplicar a tradução inline.

Você poderia fornecer um exemplo simples de como usar apenas uma tradução no HTML personalizado de um tema?

Obrigado!

[Don]

Olá,

O problema é que o data-template-name deve ser um nome exclusivo. Developing Discourse Themes & Theme Components. Como isto: data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" Agora você usa o nome sidebar no seu exemplo, que eu acho que substitui o template da barra lateral do Facebook.

Por exemplo, isto deve funcionar

<script type="text/x-handlebars" data-template-name="/connectors/discovery-below/downloadlink">
  <div class="top-navbar">
    <span class="j_menu_item" ><a>{{i18n (theme-prefix "top-navbar.download")}}</a></span>     
  </div>
</script>

[Jerome_Hordies]

Obrigado @Don

Esqueci de mencionar que o plugin não está instalado e que já tentei alterar o data-template-name para um UNIQUE-NAME aleatório com o mesmo resultado ou sem exibir meu banner, se eu inventei o PLUGIN-OUTLET-NAME.
Você provavelmente já pode dizer, não estou familiarizado com handlebars/ember
Minha compreensão é que estou personalizando um template que tem seu lugar pré-definido no html e tem como resultado que o html personalizado não está mais em /html/body/section main, mas bem no fundo, resultando em herança de CSS que eu não tinha antes.
O que tenho dificuldade em entender é por que preciso personalizar qualquer template para usar uma tradução…
Consegui identificar o template para personalizar usando o Ember inspector conforme recomendado aqui
E graças à sua resposta e link sobre o plugin-outlet, encontrei o data-template-name correto = “/connectors/above-site-header/my-navbar”
Obrigado novamente pela sua ajuda

[Don]

Entendo… Pensei que você estivesse usando o tema Fakebook e quisesse colocar seu código abaixo da seção da barra lateral.

Uma boa maneira de ver os plugin outlets visualmente é usar o componente de tema Plugin Outlet Locations.

[Jerome_Hordies]

Olá @Don ,

O motivo pelo qual usei esse exemplo do Facebook é por causa de:

@david

Para um exemplo completo de uso de traduções em um tema, confira o tema Fakebook de @awesomerobot: GitHub - discourse/Fakebook

Obrigado novamente!

[misham (Mykhailo)]

E quanto a singular e plural, como traduzir texto usando {{theme-i18n}} se ele tiver uma e muitas traduções? Por exemplo, “Resultado” e “Resultados”.

[awesomerobot (Kris)]

Existem alguns exemplos de como fazemos isso no código-fonte do Discourse, normalmente temos duas strings e alternamos com base em um inteiro:

Isso deve funcionar em um tema também, geralmente o JS seria algo como:

I18n.t(themePrefix("confirm_remove_tags"), {
  count: exampleCountValue,
});

[misham (Mykhailo)]

e quanto ao hbs, pode ser feito em templates hbs?

[david (David Taylor)]

Sim, pode:

{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}

[merefield (Robert)]

@Discourse

<DButton @label={{theme-prefix "my_translation_key"}} />

quando eu faço isso em um template de Componente .gjs dentro de um Tema, eu recebo:

Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-prefix

Então eu tento importá-lo:

import themePrefix from "discourse/helpers/theme-prefix";

Mas ele reclama:

Identifier 'themePrefix' has already been declared

(Eu procurei por um exemplo no 'hub, mas parece não haver nenhum)

[merefield (Robert)]

Atualização: você precisa usar {{i18n (themePrefix "