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]

Hallo zusammen.
Ich definiere die Vorlage upload-selector.hbs neu.
Ich möchte einen übersetzbaren Satz hinzufügen.
Ich habe eine neue Variable upload_selector.upload_images erstellt.
Zum Beispiel:

Bitte sagen Sie mir, was als Nächstes zu tun ist?

[Theudebart (Marcel Patzsch)]

Hallo,

wenn ich diese Technik im Discourse Theme Creator anwende (siehe hier), funktioniert alles wie erwartet und wie in diesem Beitrag erklärt.

Wenn ich jedoch dasselbe Theme auf meinem eigenen Server importiere, erscheint nur „[en.theme_translations.12.blog]“. Auch auf der Seite für Theme-Einstellungen fehlt der Abschnitt „Theme-Übersetzungen”, wie er im Theme Creator vorhanden ist.

Ich weiß wirklich nicht mehr, wo ich nach diesem Fehler suchen soll. Hat jemand einen Tipp für mich?

[Edit]
Ich verwende Discourse 2.6.7 ([f73cdbbd2f]) in einer Docker-Umgebung.

[IAmGav (Gavin Perch)]

@Theudebart

Ich verwende Discourse 2.6.7 ( [f73cdbbd2f] ) in einer Docker-Umgebung.

Kannst du Discourse aktualisieren?

Du verwendest eine alte Version.

[Theudebart (Marcel Patzsch)]

@IAmGav

Kannst du Discourse aktualisieren?

Du verwendest eine alte Version.

Ja, ich versuche das gerade. Das ist noch eine Sache, bei der ich Hilfe brauche, aber ich möchte das hier nicht posten – das ist ein eigenes Thema.

Wie auch immer, ich dachte, das sollte kein Problem sein, da die Übersetzungsfunktion bereits in Version 2.2.0.beta9 enthalten war. Siehe 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