Lokalisierbare Zeichenketten zu Themes und Theme-Komponenten hinzufügen

Für alle, die benutzerdefinierte Sprachen und Übersetzungen in ein Discourse-Theme oder einen Theme-Baustein einbinden möchten: Es ist nun möglich, lokalisierte Zeichenfolgen einzuschließen, die in UI-Komponenten verwendet werden können. Die Übersetzungen werden im gleichen Format wie die Kern- oder Plugin-Übersetzungen gespeichert und können auf nahezu identische Weise verwendet werden.

Themes können Übersetzungsdateien in einem Format wie /locales/{locale}.yml bereitstellen. Diese Dateien müssen gültiges YAML sein, mit einem einzigen obersten Schlüssel, der dem definierten Locale entspricht. Sie können über die discourse_theme-CLI definiert werden, indem eine .tar.gz-Datei importiert wird, aus einem GIT-Repository installiert wird oder über den Editor auf theme-creator.discourse.org.

Eine Beispiel-Locale-Datei könnte wie folgt 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 auf Theme-Ebene in der Benutzeroberfläche unter /admin/customize/themes überschreiben. Der Fallback-Mechanismus funktioniert auf die gleiche Weise wie im Kernsystem, sodass es in Ordnung ist, unvollständige Übersetzungen für nicht-englische Sprachen zu haben; diese werden die englischen Schlüssel verwenden.

Administratoren können diese Übersetzungen auch unter Design → Site-Texte verwalten. Wählen Sie ein Theme oder einen Baustein aus, um die Zeichenfolgen seiner Locale-Datei zu durchsuchen, bearbeiten Sie eine Übersetzung in der gewählten Sprache oder kehren Sie eine Überschreibung auf den Standardwert der Locale-Datei zurück. Die Auswahl ist über /admin/customize/site_texts?theme_id=THEME_ID verlinkbar. Site-Texte identifiziert diese Einträge als js.theme_translations.THEME_ID.KEY; Bearbeitungen verwenden dieselben Theme-Übersetzungsüberschreibungen wie der Theme-Editor.

Im Hintergrund werden diese Übersetzungen neben den Kern-Übersetzungen unter einem theme-spezifischen Namespace gespeichert. Zum Beispiel:

theme_translation.{theme_id}.sidebar.welcome

Sie sollten das theme_id niemals hartkodiert in Ihrem Theme-Code verwenden. Um den Übersetzungsschlüssel dynamisch zu erstellen, verwenden Sie den themePrefix-Helper:

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

// In JS code:
const result = i18n(themePrefix("my_translation_key"));
console.log("From Javascript", result);

// In a template tag:
<template>{{i18n (themePrefix "blah")}}</template>

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


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

32 „Gefällt mir“

Wie verwende ich Theme-Übersetzungen in CSS? Ich weiß, dass wir Theme-Parameter verwenden können, aber ich benötige Theme-Übersetzungen.

Das geht nicht, sie sind nur in Vorlagen und JavaScript verfügbar. Das ist dasselbe wie bei Core-/Plugin-Übersetzungen.

Im Idealfall sollten Sie die Dinge so umgestalten, dass die Zeichenfolge in einer Vorlage festgelegt wird. Wenn Sie jedoch wirklich eine anpassbare Zeichenfolge in einer CSS-Datei benötigen, können Sie die Themeneinstellungen verwenden: Developing Discourse Themes & Theme Components

1 „Gefällt mir“

Und wenn ich die Theme-Einstellung verwende, ist es möglich, sie zu übersetzen?

Nein, nicht in mehrere Sprachen, aber es würde Administratoren ermöglichen, es für ihre Website anzupassen.

2 „Gefällt mir“

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?

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.

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.

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!

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

<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>
2 „Gefällt mir“

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 :slight_smile:
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.

1 „Gefällt mir“

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

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

2 „Gefällt mir“

Hallo @Don ,

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

Danke nochmals!

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

2 „Gefällt mir“

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

Screenshot 2022-12-15 um 17.42.58

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,
});
1 „Gefällt mir“

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

1 „Gefällt mir“

Ja, das kann es:

{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}
4 „Gefällt mir“

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)

1 „Gefällt mir“

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

4 „Gefällt mir“