Lokalisierbare Zeichenketten zu Themes und Theme-Komponenten hinzufügen

[Discourse]

Für diejenigen, die benutzerdefinierte Sprachen und Übersetzungen zu einem Discourse-Theme oder Theme-Komponente hinzufügen möchten, können sie jetzt lokalisierte Zeichenfolgen einfügen, die zur Verwendung in UI-Komponenten verfügbar gemacht werden. Übersetzungen werden im selben Format wie Core/Plugin-Übersetzungen gespeichert und können fast auf die gleiche Weise verwendet werden.

Themes können Übersetzungsdateien in einem Format wie /locales/{locale}.yml bereitstellen. Diese Dateien sollten gültiges YAML sein, mit einem einzigen Top-Level-Schlüssel, der dem zu definierenden Gebietsschema entspricht. Diese können über die discourse_theme CLI, durch Importieren eines .tar.gz, durch Installation aus einem GIT-Repository oder über den Editor auf theme-creator.discourse.org definiert werden.

Eine Beispiel-Locale-Datei könnte so aussehen:

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"

Administratoren können einzelne Schlüssel pro Theme in der Benutzeroberfläche /admin/customize/themes überschreiben. Die Fallback-Behandlung erfolgt auf die gleiche Weise wie bei Core, sodass es in Ordnung ist, wenn unvollständige Übersetzungen für nicht-englische Sprachen die englischen Schlüssel verwenden.

Im Hintergrund werden diese Übersetzungen zusammen mit den Core-Übersetzungen unter einem themenspezifischen Namespace gespeichert. Zum Beispiel:

theme_translation.{theme_id}.sidebar.welcome

Sie sollten die theme_id niemals fest im Theme-Code codieren, daher gibt es einige Möglichkeiten, um Ihnen beim Zugriff auf die Übersetzungen zu helfen.

In .hbs-Dateien können Sie den dedizierten Helper verwenden:

{{theme-i18n "my_translation_key"}}

Oder, wenn Sie den Übersetzungsschlüssel an eine andere Komponente übergeben müssen, können Sie den theme-prefix-Helper verwenden:

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

In Javascript oder in .gjs-Dateien können Sie die Funktion themePrefix verwenden. Diese wird automatisch injiziert und muss nicht importiert werden:

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

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

Ein vollständiges Beispiel für die Verwendung von Übersetzungen in einem Theme finden Sie in @awesomerobot’s Fakebook-Theme: GitHub - discourse/Fakebook

---

Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.

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

Hallo, entschuldigen Sie im Voraus für die Anfängerfrage.
Ich habe eine Kopfzeile nur mit HTML und CSS erstellt

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

Und dann möchte ich das Wort „Download“ übersetzen
Ich habe die englische Übersetzungsdatei erstellt

en: 
  top-navbar: 
    download: "Yeah"

Dann habe ich den HTML-Code wie im Facebook-Beispiel geändert

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

Dies übersetzt und gibt „Yeah“ aus, aber es ruiniert mein Layout. Ich vermute, es liegt daran, dass ich „/connectors/discovery-below/sidebar“ verwende. Ich möchte meine Übersetzung nur anwenden, ohne an einer Vorlage herumzufummeln, aber ich verstehe nicht, wie ich die Übersetzung einfach inline anwenden kann.

Könnten Sie bitte ein einfaches Beispiel geben, wie man eine Übersetzung im benutzerdefinierten HTML eines Themas verwendet?

Danke!

[Don]

Hallo,

Das Problem ist, dass data-template-name ein eindeutiger Name sein sollte. Developing Discourse Themes & Theme Components. So: data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" Jetzt verwenden Sie den Namen sidebar in Ihrem Beispiel, der meiner Meinung nach die Fakebook-Seitenleisten-Vorlage überschreibt.

Zum Beispiel sollte dies funktionieren

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

Danke @Don

Ich habe vergessen zu erwähnen, dass das Plugin nicht installiert ist und dass ich bereits versucht habe, den data-template-name in etwas Random UNIQUE-NAME zu ändern, mit demselben Ergebnis, oder dass mein Banner überhaupt nicht angezeigt wird, wenn ich mir den PLUGIN-OUTLET-NAME ausgedacht habe.
Sie können wahrscheinlich schon erkennen, dass ich mit Handlebars/Ember überhaupt nicht vertraut bin
Mein Verständnis ist, dass ich eine Vorlage anpasse, die ihren vordefinierten Platz im HTML hat und das Ergebnis ist, dass der benutzerdefinierte HTML nicht mehr über /html/body/section main, sondern tief im Inneren liegt, was zu einer CSS-Vererbung führt, die ich vorher nicht hatte.
Was ich nicht verstehe, ist, warum ich eine Vorlage anpassen muss, um eine Übersetzung zu verwenden…
Ich konnte die anzupassende Vorlage mithilfe von Ember inspector identifizieren, wie hier empfohlen.
Und dank Ihrer Antwort und des Links zum Plugin-Outlet habe ich den richtigen data-template-name=“/connectors/above-site-header/my-navbar” gefunden.
Nochmals vielen Dank für Ihre Hilfe.

[Don]

Ich verstehe… Ich dachte, Sie würden das Fakebook-Theme verwenden und Ihren Code unter dem Seitenleistenbereich platzieren wollen.

Eine gute Möglichkeit, die Plugin-Outlets visuell zu sehen, ist die Verwendung der Plugin Outlet Locations Theme-Komponente.

[Jerome_Hordies]

Hallo @Don ,

Der Grund, warum ich dieses Facebook-Beispiel verwendet habe, ist:

@david

Für ein vollständiges Beispiel zur Verwendung von Übersetzungen in einem Theme, schauen Sie sich das Fakebook-Theme von @awesomerobot an: GitHub - discourse/Fakebook

Danke nochmals!

[misham (Mykhailo)]

Was ist mit Singular und Plural, wie übersetzt man Text mit {{theme-i18n}}, wenn er eine und viele Übersetzungen hat? Zum Beispiel „Ergebnis“ und „Ergebnisse“.

[awesomerobot (Kris)]

Es gibt einige Beispiele dafür, wie wir dies in Discores Quellcode tun. Normalerweise haben wir zwei Zeichenfolgen und wechseln basierend auf einer Ganzzahl:

Dies sollte auch in einem Theme funktionieren. Im Allgemeinen würde der JS-Code etwa so aussehen:

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

[misham (Mykhailo)]

und was ist mit hbs, kann das in hbs-Vorlagen gemacht werden?

[david (David Taylor)]

Ja, das kann es:

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

[merefield (Robert)]

@Discourse

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

Wenn ich das in einer .gjs Component-Vorlage innerhalb eines Themes tue, erhalte ich:

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

Also versuche ich, es zu importieren:

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

Aber es murrt:

Identifier 'themePrefix' has already been declared

(Ich habe auf der 'Hub nach einem Beispiel gesucht, aber es scheint keines zu geben)

[merefield (Robert)]

Update: Sie müssen {{i18n (themePrefix " verwenden