Adicionar strings localizáveis a temas e componentes de tema

[Discourse]

Para aqueles que procuram adicionar idiomas e traduções personalizadas a um tema ou componente de tema do Discourse, eles agora podem incluir strings localizáveis, que são disponibilizadas para uso em componentes da interface do usuário. As traduções são armazenadas no mesmo formato que as traduções do núcleo/plugin e podem ser usadas quase da mesma forma.

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

Um arquivo de locale de exemplo pode ser assim:

en:
  theme_metadata:
    description: "This is a description for my theme"
    settings:
      theme_setting_name: "This is a description for the setting `theme_setting_name`"
      another_theme_setting_name:
        description: "This is a description for the setting `another_theme_setting_name`"
  sidebar:
    welcome: "Welcome"
    back: "back,"
    welcome_subhead: "We're glad you're here!"
    likes_header: "Share the Love"
    badges_header: "Your Top Badges"
    full_profile: "View your full profile"

Os administradores podem substituir chaves individuais por tema na interface do usuário /admin/customize/themes. O fallback é tratado da mesma forma que o núcleo, portanto, está tudo bem em ter traduções incompletas para idiomas que não sejam o inglês, pois usarão as chaves em inglês.

Em segundo plano, essas traduções são armazenadas ao lado das 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 no código do seu tema, então existem algumas maneiras de ajudá-lo a acessar as traduções.

Em arquivos .hbs, você pode usar o helper dedicado

{{theme-i18n "my_translation_key"}}

Ou, se você precisar passar a chave de tradução para outro componente, você pode usar o helper theme-prefix:

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

Em Javascript, ou em arquivos .gjs, você pode usar a função themePrefix. Ela é injetada automaticamente e não precisa ser importada:

const result = I18n.t(themePrefix("my_translation_key"));

<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

---

Este documento é controlado por versão - sugira alterações no github.

[evantill (Eric Vantillard)]

Howto use theme translations in CSS ? I know we can use theme parameters but I need theme translations.

[david (David Taylor)]

You can’t, they’re only available in templates and javascript. That’s the same as core/plugin translations.

Ideally, refactor things so that the string is set in a template. But if you really need a customisable string in a css file, you could use theme settings: Developer’s guide to Discourse Themes

[evantill (Eric Vantillard)]

And if I use theme setting, is it possible to translate it ?

[david (David Taylor)]

No, not in to multiple languages, but it would allow admins to customize it for their site.

[Mikhail_Tyuftyaev]

Hello everyone.
I’m redefining the template upload-selector.hbs
I want to add a translatable phrase.
I created a new variable upload_selector.upload_images
For example

Please tell me what to do next?

[Theudebart (Marcel Patzsch)]

Hello,

when i try this technic in the discourse theme creator (see here) everything works fine and as explained here in the post.

However if I import the very same theme on my own server only " [en.theme_translations.12.blog]" appears. Also in the theme settings page there is no “Theme Translations” section like on the theme creator.

I really don’t know where to search for this error anymore. Has anybody a hint for me?

[Edit]
I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

[IAmGav (Gavin Perch)]

@Theudebart

I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

can you update discourse ?

you are using an old version

[Theudebart (Marcel Patzsch)]

@IAmGav

can you update discourse ?

you are using an old version

Yeah i’m trying that, that is another thing i need help with but, I don’t want to post it here, that’s another topic.

Anyway I thought that shouldn’t be problem as the translation feature was included in version 2.2.0.beta9, see 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 "