Añadir cadenas localizables a temas y componentes de temas

[Discourse]

Para aquellos que buscan añadir idiomas y traducciones personalizadas a un tema o componente de tema de Discourse, ahora pueden incluir cadenas localizables, que se ponen a disposición para su uso en componentes de la interfaz de usuario. Las traducciones se almacenan en el mismo formato que las traducciones del núcleo/plugin y se pueden usar de casi la misma manera.

Los temas pueden proporcionar archivos de traducción en un formato como /locales/{locale}.yml. Estos archivos deben ser YAML válido, con una única clave de nivel superior igual a la localización que se está definiendo. Estas se pueden definir usando la CLI discourse_theme, importando un .tar.gz, instalando desde un repositorio GIT, o a través del editor en theme-creator.discourse.org.

Un archivo de localización de ejemplo podría verse así:

en:
  theme_metadata:
    description: "Esta es una descripción para mi tema"
    settings:
      theme_setting_name: "Esta es una descripción para la configuración `theme_setting_name`"
      another_theme_setting_name:
        description: "Esta es una descripción para la configuración `another_theme_setting_name`"
  sidebar:
    welcome: "Bienvenido"
    back: "atrás,"
    welcome_subhead: "¡Estamos encantados de que estés aquí!"
    likes_header: "Comparte el Amor"
    badges_header: "Tus Mejores Insignias"
    full_profile: "Ver tu perfil completo"

Los administradores pueden anular claves individuales por tema en la interfaz de usuario /admin/customize/themes. La reserva se maneja de la misma manera que el núcleo, por lo que está bien tener traducciones incompletas para idiomas que no sean inglés, ya que se utilizarán las claves en inglés.

En segundo plano, estas traducciones se almacenan junto con las traducciones del núcleo, bajo un espacio de nombres específico del tema. Por ejemplo:

theme_translation.{theme_id}.sidebar.welcome

Nunca debes codificar la theme_id en el código de tu tema, por lo que hay varias formas de ayudarte a acceder a las traducciones.

En archivos .hbs, puedes usar el helper dedicado

{{theme-i18n "my_translation_key"}}

O, si necesitas pasar la clave de traducción a otro componente, puedes usar el helper theme-prefix:

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

En Javascript, o en archivos .gjs, puedes usar la función themePrefix. Esta se inyecta automáticamente y no necesita ser importada:

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

<template>{{i18n (themePrefix "blah")}}</template>

Para un ejemplo completo de uso de traducciones en un tema, consulta el tema Fakebook de @awesomerobot: GitHub - discourse/Fakebook

---

Este documento está controlado por versiones: sugiere cambios en 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]

Hola, disculpa de antemano por la pregunta de novato.
Creé un encabezado solo con html y css

        <div class="top-navbar">
         <span class="j_menu_item" ><a>Download</a></span>     
        </div>

Y luego quiero traducir la palabra “Download”
Creé el archivo de traducción al inglés

en: 
  top-navbar: 
    download: "Yeah"

Luego cambié el código html como en el ejemplo de facebook

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

Esto traduce e imprime “Yeah” pero rompe mi diseño, supongo que es porque estoy usando “/connectors/discovery-below/sidebar”. Solo quiero aplicar mi traducción sin modificar ninguna plantilla, pero no entiendo cómo aplicar la traducción en línea.

¿Podrías proporcionar un ejemplo simple sobre cómo usar una traducción en el html personalizado de un tema?

¡Gracias!

[Don]

Hola,

El problema es que data-template-name debe ser un nombre único. Developing Discourse Themes & Theme Components. Como esto: data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" Ahora usas el nombre sidebar en tu ejemplo, que creo que anula la plantilla de la barra lateral de Facebook.

Por ejemplo, esto debería funcionar

<script type="text/x-handlebars" data-template-name="/connectors/discovery-below/downloadlink">
  <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>

[Jerome_Hordies]

Gracias @Don

Olvidé mencionar que el plugin no está instalado y que ya intenté cambiar el data-template-name por un UNIQUE-NAME aleatorio con el mismo resultado o que mi banner no aparezca en absoluto si inventé el PLUGIN-OUTLET-NAME.
Probablemente puedas notar ahora, no estoy familiarizado en absoluto con handlebars/ember
Entiendo que estoy personalizando una plantilla que tiene su lugar predefinido en el html y el resultado es que el html personalizado ya no está en /html/body/section main sino en lo más profundo, lo que resulta en una herencia de CSS que no tenía antes.
Lo que me cuesta entender es ¿Por qué necesito personalizar alguna plantilla para usar una traducción…?
Logré identificar la plantilla a personalizar usando Ember inspector como se aconsejó aquí
Y gracias a tu respuesta y enlace sobre el plugin-outlet encontré el data-template-name correcto = “/connectors/above-site-header/my-navbar”
Gracias de nuevo por tu ayuda.

[Don]

Ya veo… Pensé que estabas usando el tema Fakebook y querías colocar tu código debajo de la sección de la barra lateral.

Una buena manera de ver las salidas de complementos visualmente es usar el componente temático Ubicaciones de salidas de complementos.

[Jerome_Hordies]

Hola @Don,

La razón por la que usé ese ejemplo de Facebook es por:

@david

Para un ejemplo completo de uso de traducciones en un tema, consulta el tema Fakebook de @awesomerobot: GitHub - discourse/Fakebook

¡Gracias de nuevo!

[misham (Mykhailo)]

¿Qué pasa con el singular y el plural, cómo traducir texto usando {{theme-i18n}} si tiene una y muchas traducciones? Por ejemplo, “Resultado” y “Resultados”.

[awesomerobot (Kris)]

Hay algunos ejemplos de cómo hacemos esto en el código fuente de Discourse, normalmente tenemos dos cadenas y cambiamos según un entero:

Esto debería funcionar también en un tema, generalmente el JS se vería algo así:

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

[misham (Mykhailo)]

¿y qué hay de hbs, se puede hacer en plantillas hbs?

[david (David Taylor)]

Sí, puede:

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

[merefield (Robert)]

@Discourse

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

cuando hago eso en una plantilla de componente .gjs dentro de un Tema, obtengo:

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

Así que intento importarlo:

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

Pero refunfuña:

Identifier 'themePrefix' has already been declared

(Busqué un ejemplo en el 'hub pero no parece haber ninguno)

[merefield (Robert)]

Actualización: necesitas usar {{i18n (themePrefix "