Agregar cadenas localizables a temas y componentes de temas

[Discourse]

Para aquellos que deseen agregar idiomas y traducciones personalizados a un tema o componente de tema de Discourse, ahora pueden incluir cadenas localizadas, las cuales estarán disponibles para su uso en componentes de la interfaz de usuario. Las traducciones se almacenan en el mismo formato que las traducciones del núcleo y de los complementos, y pueden utilizarse de manera casi idéntica.

Los temas pueden proporcionar archivos de traducción en un formato como /locales/{locale}.yml. Estos archivos deben ser YAML válidos, con una única clave de nivel superior igual al idioma que se está definiendo. Estos pueden definirse 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 idioma de ejemplo podría verse así:

es:
  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: "¡Nos alegra que estés aquí!"
    likes_header: "Comparte el cariño"
    badges_header: "Tus mejores insignias"
    full_profile: "Ver tu perfil completo"

Los administradores pueden sobrescribir claves individuales por tema en la interfaz de usuario de /admin/customize/themes. La fallback se maneja de la misma manera que en el núcleo, por lo que está bien tener traducciones incompletas para idiomas distintos al inglés; en ese caso, 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 el theme_id directamente en el código de tu tema. Para construir dinámicamente la clave de traducción, utiliza el helper themePrefix:

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

// En código JS:
const result = i18n(themePrefix("my_translation_key"));
console.log("Desde Javascript", result);

// En una etiqueta de plantilla:
<template>{{i18n (themePrefix "blah")}}</template>

Para un ejemplo completo de cómo usar traducciones en un tema, consulta el tema Fakebook de @awesomerobot: GitHub - discourse/Fakebook · GitHub

---

Este documento está bajo control de versiones: sugiere cambios en GitHub.

[evantill (Eric Vantillard)]

¿Cómo se usan las traducciones del tema en CSS? Sé que podemos usar parámetros del tema, pero necesito las traducciones del tema.

[david (David Taylor)]

No puedes, solo están disponibles en plantillas y JavaScript. Es lo mismo que las traducciones del núcleo o de los complementos.

Idealmente, refactoriza las cosas para que la cadena se establezca en una plantilla. Pero si realmente necesitas una cadena personalizable en un archivo CSS, podrías usar la configuración del tema: Developing Discourse Themes & Theme Components

[evantill (Eric Vantillard)]

Y si uso la configuración del tema, ¿es posible traducirla?

[david (David Taylor)]

No, no en varios idiomas, pero permitiría a los administradores personalizarlo para su sitio.

[Mikhail_Tyuftyaev]

Hola a todos.
Estoy redefiniendo la plantilla upload-selector.hbs.
Quiero agregar una frase traducible.
He creado una nueva variable upload_selector.upload_images.
Por ejemplo:

¿Por favor, díganme qué hacer a continuación?

[Theudebart (Marcel Patzsch)]

Hola,

cuando intento esta técnica en el creador de temas de Discourse (ver aquí), todo funciona correctamente y tal como se explica en esta publicación.

Sin embargo, si importo el mismo tema en mi propio servidor, solo aparece “[en.theme_translations.12.blog]”. Además, en la página de configuración del tema no hay ninguna sección llamada “Traducciones del tema”, como sí ocurre en el creador de temas.

Realmente no sé dónde buscar este error. ¿Alguien tiene alguna sugerencia para mí?

[Edición]
Estoy usando Discourse 2.6.7 ([f73cdbbd2f]) en un entorno Docker.

[IAmGav (Gavin Perch)]

@Theudebart

Estoy usando Discourse 2.6.7 ([f73cdbbd2f]) en un entorno de Docker.

¿Puedes actualizar Discourse?

Estás utilizando una versión antigua.

[Theudebart (Marcel Patzsch)]

@IAmGav

¿Puedes actualizar Discourse?

Estás usando una versión antigua.

Sí, estoy intentando eso. Es otra cosa en la que necesito ayuda, pero no quiero publicarlo aquí; eso merece otro tema.

De todos modos, pensé que no debería ser un problema, ya que la función de traducción se incluyó en la versión 2.2.0.beta9, véase 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 "