Ajouter des chaînes localisables aux thèmes et aux composants de thème

[Discourse]

Pour ceux qui souhaitent ajouter des langues personnalisées et des traductions à un thème ou un composant de thème Discourse, ils peuvent désormais inclure des chaînes localisées, qui sont mises à disposition pour une utilisation dans les composants de l’interface utilisateur. Les traductions sont stockées dans le même format que les traductions du noyau et des plugins, et peuvent être utilisées de manière presque identique.

Les thèmes peuvent fournir des fichiers de traduction dans un format tel que /locales/{locale}.yml. Ces fichiers doivent être des fichiers YAML valides, avec une seule clé de premier niveau égale à la langue définie. Ils peuvent être définis en utilisant l’outil en ligne de commande discourse_theme, en important un fichier .tar.gz, en installant depuis un dépôt GIT, ou via l’éditeur sur theme-creator.discourse.org.

Un exemple de fichier de langue pourrait ressembler à ceci :

fr:
  theme_metadata:
    description: "Ceci est une description pour mon thème"
    settings:
      theme_setting_name: "Ceci est une description pour le paramètre `theme_setting_name`"
      another_theme_setting_name:
        description: "Ceci est une description pour le paramètre `another_theme_setting_name`"
  sidebar:
    welcome: "Bienvenue"
    back: "retour"
    welcome_subhead: "Nous sommes ravis de vous avoir ici !"
    likes_header: "Partagez l'amour"
    badges_header: "Vos meilleurs badges"
    full_profile: "Voir votre profil complet"

Les administrateurs peuvent remplacer des clés individuelles par thème dans l’interface utilisateur /admin/customize/themes. La gestion des valeurs par défaut fonctionne de la même manière que pour le noyau, il est donc acceptable d’avoir des traductions incomplètes pour les langues autres que l’anglais, car elles utiliseront les clés anglaises.

En arrière-plan, ces traductions sont stockées aux côtés des traductions du noyau, sous un espace de noms spécifique au thème. Par exemple :

theme_translation.{theme_id}.sidebar.welcome

Vous ne devez jamais coder en dur l’identifiant du thème (theme_id) dans votre code de thème. Pour construire dynamiquement la clé de traduction, utilisez l’helper themePrefix :

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

// Dans le code JS :
const result = i18n(themePrefix("ma_cle_de_traduction"));
console.log("Depuis Javascript", result);

// Dans une balise de modèle :
<template>{{i18n (themePrefix "blah")}}</template>

Pour un exemple complet de l’utilisation des traductions dans un thème, consultez le thème Fakebook de @awesomerobot : GitHub - discourse/Fakebook · GitHub

---

Ce document est versionné - proposez des modifications sur GitHub.

[evantill (Eric Vantillard)]

Comment utiliser les traductions de thème en CSS ? Je sais que nous pouvons utiliser les paramètres de thème, mais j’ai besoin des traductions de thème.

[david (David Taylor)]

Ce n’est pas possible, elles sont uniquement disponibles dans les modèles et le JavaScript. C’est la même chose que pour les traductions du cœur ou des plugins.

Idéalement, refactorisez le code pour que la chaîne soit définie dans un modèle. Mais si vous avez vraiment besoin d’une chaîne personnalisable dans un fichier CSS, vous pouvez utiliser les paramètres du thème : Developing Discourse Themes & Theme Components

[evantill (Eric Vantillard)]

Et si j’utilise le paramètre de thème, est-il possible de le traduire ?

[david (David Taylor)]

Non, pas dans plusieurs langues, mais cela permettrait aux administrateurs de le personnaliser pour leur site.

[Mikhail_Tyuftyaev]

Bonjour à tous.
Je suis en train de redéfinir le modèle upload-selector.hbs.
Je souhaite ajouter une phrase traduisible.
J’ai créé une nouvelle variable upload_selector.upload_images.
Par exemple

Que dois-je faire ensuite ?

[Theudebart (Marcel Patzsch)]

Bonjour,

lorsque j’essaie cette technique dans le créateur de thèmes Discourse (voir ici), tout fonctionne parfaitement, comme expliqué dans ce post.

Cependant, si j’importe exactement le même thème sur mon propre serveur, seule la chaîne « [en.theme_translations.12.blog] » apparaît. De plus, sur la page des paramètres du thème, il n’y a pas de section « Traductions du thème » comme dans le créateur de thèmes.

Je ne sais vraiment plus où chercher cette erreur. Quelqu’un aurait-il un indice pour moi ?

[Edit]
J’utilise Discourse 2.6.7 ( [f73cdbbd2f ] ) dans un environnement Docker.

[IAmGav (Gavin Perch)]

@Theudebart

J’utilise Discourse 2.6.7 ([f73cdbbd2f]) dans un environnement Docker.

Peux-tu mettre à jour Discourse ?

Tu utilises une ancienne version.

[Theudebart (Marcel Patzsch)]

@IAmGav

Peux-tu mettre à jour Discourse ?

Tu utilises une ancienne version.

Oui, j’essaie justement cela. C’est un autre sujet pour lequel j’ai besoin d’aide, mais je ne veux pas en parler ici, ce sera un autre sujet.

Quoi qu’il en soit, je pensais que cela ne devrait pas poser de problème, car la fonctionnalité de traduction a été incluse dans la version 2.2.0.beta9, voir commit.

[Jerome_Hordies]

Bonjour, désolé d’avance pour la question de débutant.
J’ai créé un en-tête avec juste du HTML et du CSS

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

Et ensuite je veux traduire le mot “Download”
J’ai créé le fichier de traduction anglais

en: 
  top-navbar: 
    download: "Yeah"

Ensuite j’ai modifié le code HTML comme pour l’exemple 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>

Cela traduit et affiche “Yeah” mais casse ma mise en page, je suppose que c’est parce que j’utilise “/connectors/discovery-below/sidebar”. Je veux juste appliquer ma traduction sans toucher à aucun modèle, mais je ne comprends pas comment appliquer la traduction en ligne.

Pourriez-vous s’il vous plaît fournir un exemple simple sur la façon d’utiliser une traduction dans le HTML personnalisé d’un thème ?

Merci !

[Don]

Bonjour,

Le problème est que data-template-name doit être un nom unique. Developing Discourse Themes & Theme Components. Comme ceci : data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" Maintenant, vous utilisez le nom sidebar dans votre exemple, ce qui, je pense, remplace le modèle de barre latérale de Facebook.

Par exemple, ceci devrait fonctionner

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

Merci @Don

J’ai oublié de mentionner que le plugin n’est pas installé et que j’ai déjà essayé de changer le data-template-name en un NOM UNIQUE aléatoire avec le même résultat ou de ne pas afficher ma bannière du tout si j’inventais le PLUGIN-OUTLET-NAME.
Vous pouvez probablement le dire maintenant, je ne suis pas du tout familier avec handlebars/ember
Ma compréhension est que je personnalise un modèle qui a sa place prédéfinie dans le HTML et que le résultat est que le HTML personnalisé n’est plus sur /html/body/section main mais profondément à l’intérieur, ce qui entraîne un héritage CSS que je n’avais pas auparavant.
Ce que j’ai du mal à comprendre, c’est pourquoi je dois personnaliser un modèle pour utiliser une traduction…
J’ai réussi à identifier le modèle à personnaliser en utilisant Ember inspector comme conseillé ici
Et grâce à votre réponse et au lien sur le plugin-outlet, j’ai trouvé le bon data-template-name = “/connectors/above-site-header/my-navbar”
Merci encore pour votre aide

[Don]

Je vois… Je pensais que vous utilisiez le thème Fakebook et que vous vouliez placer votre code sous la section de la barre latérale.

Une bonne façon de visualiser les points de sortie des plugins est d’utiliser le composant de thème Plugin Outlet Locations.

[Jerome_Hordies]

Salut @Don ,

La raison pour laquelle j’ai utilisé cet exemple de Facebook est à cause de :

@david

Pour un exemple complet d’utilisation des traductions dans un thème, consultez le thème Fakebook de @awesomerobot : GitHub - discourse/Fakebook

Merci encore !

[misham (Mykhailo)]

Qu’en est-il du singulier et du pluriel, comment traduire du texte à l’aide de {{theme-i18n}} s’il a une et plusieurs traductions ? Par exemple, « Result » et « Results »

[awesomerobot (Kris)]

Il existe quelques exemples de la façon dont nous procédons dans le code source de Discourse, généralement nous avons deux chaînes et nous basons le choix sur un entier :

Cela devrait également fonctionner dans un thème, généralement le JS ressemblerait à ceci :

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

[misham (Mykhailo)]

et qu’en est-il de hbs, peut-il être fait dans les modèles hbs ?

[david (David Taylor)]

Oui, c’est possible :

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

[merefield (Robert)]

@Discourse

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

quand je fais ça dans un template de composant .gjs au sein d’un thème, j’obtiens :
Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-prefix

Alors je tente de l’importer :
import themePrefix from "discourse/helpers/theme-prefix";

Mais ça râle :
Identifier 'themePrefix' has already been declared

(J’ai cherché un exemple sur le 'hub mais il ne semble pas y en avoir)

[merefield (Robert)]

Mise à jour : vous devez utiliser {{i18n (themePrefix "