Aggiungi stringhe localizzabili a temi e componenti tema

[Discourse]

Per coloro che desiderano aggiungere lingue e traduzioni personalizzate a un tema o a un componente tema di Discourse, ora è possibile includere stringhe localizzate, che vengono rese disponibili per l’uso nei componenti dell’interfaccia utente. Le traduzioni sono archiviate nello stesso formato delle traduzioni core/plugin e possono essere utilizzate quasi allo stesso modo.

I temi possono fornire file di traduzione in un formato come /locales/{locale}.yml. Questi file devono essere YAML validi, con una singola chiave di primo livello uguale alla locale definita. Queste possono essere definite utilizzando la CLI discourse_theme, importando un .tar.gz, installando da un repository GIT o tramite l’editor su theme-creator.discourse.org.

Un file di locale di esempio potrebbe essere simile a

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"

Gli amministratori possono sovrascrivere le singole chiavi per tema nell’interfaccia utente /admin/customize/themes. Il fallback è gestito allo stesso modo del core, quindi è accettabile avere traduzioni incomplete per le lingue non inglesi che utilizzeranno le chiavi inglesi.

In background, queste traduzioni sono archiviate insieme alle traduzioni core, sotto un namespace specifico del tema. Per esempio:

theme_translation.{theme_id}.sidebar.welcome

Non si dovrebbe mai codificare in modo permanente l’theme_id nel codice del tema, quindi ci sono alcuni modi per aiutarti ad accedere alle traduzioni.

Nei file .hbs, è possibile utilizzare l’helper dedicato

{{theme-i18n "my_translation_key"}}

Oppure, se è necessario passare la chiave di traduzione a un altro componente, è possibile utilizzare l’helper theme-prefix:

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

In Javascript, o nei file .gjs, è possibile utilizzare la funzione themePrefix. Questa viene iniettata automaticamente e non necessita di essere importata:

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

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

Per un esempio completo di utilizzo delle traduzioni in un tema, consulta il tema Fakebook di @awesomerobot: GitHub - discourse/Fakebook

---

Questo documento è controllato tramite versione - suggerisci modifiche su 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]

Ciao, scusa in anticipo per la domanda da principiante.
Ho creato un’intestazione solo con html e css

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

E poi voglio tradurre la parola “Download”
Ho creato il file di traduzione inglese

en: 
  top-navbar: 
    download: "Yeah"

Poi ho modificato il codice html come per l’esempio di 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>

Questo traduce e stampa “Yeah” ma rompe il mio layout, immagino sia perché sto usando “/connectors/discovery-below/sidebar”. Voglio solo applicare la mia traduzione senza modificare alcun template ma non capisco come applicare semplicemente la traduzione inline.

Potresti fornire un semplice esempio su come utilizzare una traduzione nell’html personalizzato di un tema?

Grazie!

[Don]

Ciao,

Il problema è che data-template-name dovrebbe essere un nome univoco. Developing Discourse Themes & Theme Components. Come questo: data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" Ora stai usando il nome sidebar nel tuo esempio che credo sovrascriva il template della sidebar di Facebook.

Ad esempio, questo dovrebbe funzionare

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

Grazie @Don

Ho dimenticato di menzionare che il plugin non è installato e che ho già provato a cambiare il data-template-name in un UNIQUE-NAME casuale con lo stesso risultato o non mostrando affatto il mio banner se ho inventato il PLUGIN-OUTLET-NAME.
Probabilmente puoi capire a questo punto, non ho alcuna familiarità con handlebars/ember
La mia comprensione è che sto personalizzando un template che ha il suo posto predefinito nell’html e ha come risultato che l’html personalizzato non è più sopra /html/body/section main ma in profondità, risultando in un’ereditarietà CSS che non avevo prima.
Ciò che fatico a capire è perché devo personalizzare qualsiasi template per usare una traduzione…
Sono riuscito a identificare il template da personalizzare usando Ember inspector come consigliato qui
E grazie alla tua risposta e al link sul plugin-outlet ho trovato il giusto data-template-name=“/connectors/above-site-header/my-navbar”
Grazie ancora per il tuo aiuto

[Don]

Oh capisco… Pensavo stessi usando il tema Fakebook e volessi posizionare il tuo codice sotto la sezione della barra laterale.

Un buon modo per vedere visivamente gli outlet dei plugin è usare il componente tema Plugin Outlet Locations.

[Jerome_Hordies]

Ciao @Don,

Il motivo per cui ho usato quell’esempio di Facebook è dovuto a:

@david

Per un esempio completo di utilizzo delle traduzioni in un tema, dai un’occhiata al tema Fakebook di @awesomerobot: GitHub - discourse/Fakebook

Grazie ancora!

[misham (Mykhailo)]

E per quanto riguarda singolare e plurale, come tradurre il testo usando {{theme-i18n}} se ha una e molte traduzioni. Ad esempio “Risultato” e “Risultati”

[awesomerobot (Kris)]

Ci sono alcuni esempi di come facciamo questo nel codice sorgente di Discourse, tipicamente abbiamo due stringhe e cambiamo in base a un intero:

Questo dovrebbe funzionare anche in un tema, in genere il JS dovrebbe assomigliare a questo:

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

[misham (Mykhailo)]

e per quanto riguarda hbs, si può fare nei template hbs?

[david (David Taylor)]

Sì, può:

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

[merefield (Robert)]

@Discourse

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

quando faccio così in un template di componente .gjs all’interno di un Tema ottengo:
Errore: Tentativo di risolvere un helper in un template in modalità strict, ma quel valore non era nell'ambito: theme-prefix

Quindi tento di importarlo:
import themePrefix from "discourse/helpers/theme-prefix";

Ma si lamenta:
Identificatore 'themePrefix' è già stato dichiarato

(Ho cercato un esempio sull’ 'hub ma non sembra essercene)

[merefield (Robert)]

Aggiornamento: devi usare {{i18n (themePrefix "