Entwicklung von Diskursthemen & Thema-Komponenten

Dokumentation Entwicklerhandbücher
, ,
1

Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components.

This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to:

Themes vs. Theme Components

Discourse Themes can be used to customize the frontend user experience using CSS and JavaScript. Each theme has its own git repository, and community admins can generally install and manage them via the Discourse admin panel, even on shared hosting platforms.

Theme Components are themes which are intended for use alongside other Theme Components, as part of an overall Theme. From a development point of view, Theme Components and Themes are almost identical. In these guides, the phrase “Theme” and “Theme Component” are used interchangeably.

Prerequisites

Firstly, make sure you understand how to use existing themes and theme components in Discourse. Using ready-made themes is the quickest and safest way to customize your community. If you need more, then it’s time to consider writing your own theme.

As part of Discourse’s overall architecture, Discourse Themes are built using standard HTML, CSS, JavaScript technologies, and make use of Ember concepts for more advanced UIs. These reference guides assume a base-level understanding of these technologies, and link out to external references where possible.

Discourse is a fast-moving project, and as such any custom theme will require maintenance over time. Make sure you consider this as part of your planning & development processes.

Getting Started

Frontend Customization

More!

Check out the rest of the Developer Guides !

This document is version controlled - suggest changes on github.

142 „Gefällt mir“
136

Viele alte und/oder tote Links und Verweise im Abschnitt The PluginApi - modifyClass() section…

Diese Datei hat sich so stark geändert, dass checkReplyLength nicht einmal mehr existiert…

Und später im selben Abschnitt:

Dieser Link führt nur zu einem “404 - Seite nicht gefunden”-Fehler…

Ich habe die Verwendung dieser Dokumentation danach aufgegeben…

4 „Gefällt mir“
137

Ein Beitrag wurde in ein neues Thema aufgeteilt: Benutzerkarten-Vorlage oder Widget?

138

Die Dokumentation scheint in diesem Teil etwas veraltet zu sein… (auch api.modifyClass beschwert sich über fehlende pluginId). Wie kann ich ein Skript ausführen, wenn about-page geladen wird? Dieses hier scheint nicht zu funktionieren (keine Fehler). Ich hatte gemischte Ergebnisse mit einigen anderen Komponenten. Danke.

<script type="text/discourse-plugin" version="0.11.1">

api.modifyClass("component:about-page", {
  pluginId: 'discourse-about-theme',

  didInsertElement() {
    this._super(...arguments);
    console.log("Willkommen auf der Info-Seite!");
  }

});

</script>
1 „Gefällt mir“
139

Hallo :wave: about-page ist jetzt in .gjs, was auch bedeutet, dass es nicht mehr auf diese Weise modifizierbar ist. Wenn Sie Änderungen vornehmen möchten, müssen Sie einen der auf dieser Seite verfügbaren Connectors verwenden.

Sie können diese leicht mit Plugin-Outlet-Standorte Theme-Komponente überprüfen oder in der Datei \u003cPluginOutlet\u003e nachsehen.

4 „Gefällt mir“
142

Vielen Dank. Macht Sinn. Ich habe stattdessen einen Connector verwendet, der funktioniert.

2 „Gefällt mir“
143

Ist dieser Leitfaden überhaupt noch korrekt? Ich habe ihn komplett durchgelesen, um eine Theme-Komponente zu erstellen, und dann die Beispiel-Theme-Komponenten angesehen. Keine davon verwendet die Anweisungen, die sie verwenden sollen. Zum Beispiel scheint die Discourse-Brand-Header-Theme-Komponente von der Verwendung von Dingen wie api.createWidget in header.html zu einer völlig anderen Codebasis mit Initialisierern, Komponenten usw. umgeschrieben worden zu sein. Extrem komplexer Code. Der Leitfaden spricht von der Verwendung der API-Methode mit Widgets, aber das ist nicht das, was irgendeine der Komponenten überhaupt verwendet. Gibt es einen aktualisierten Leitfaden oder etwas, das man stattdessen verwenden kann?

Bearbeiten: Angeblich wird die Widget-API abgeschafft, aber gibt es Leitfäden, was stattdessen verwendet werden soll? Der gesamte Leitfaden hier scheint auf Code zu basieren, der veraltet ist?

3 „Gefällt mir“
144

Das stimmt. Der Leitfaden sollte aktualisiert werden. Einige Teile sind jedoch immer noch sehr relevant, wie die Dateistruktur usw.

2 „Gefällt mir“
145

Ja, SCSS scheint relevant zu sein, aber ansonsten scheinen alle Beispiel-Theme-Komponenten Komponenten zu verwenden und wurden in eine völlig andere Codebasis refaktorisiert als das, was hier gelehrt wird. Ich habe alle Komponenten durchgesehen, auf die im Abschnitt Plugin API verwiesen wird, und jede einzelne wurde auf eine Weise refaktorisiert, die sich völlig von dem unterscheidet, was hier im Leitfaden gelehrt wird. Widgets werden überhaupt nicht mehr verwendet. Es sind alles Komponenten. Gibt es eine Anleitung, wie man die neuen Komponenten richtig verwendet, da Widgets abgeschafft werden?

2 „Gefällt mir“
146

Ich bin gerade auf diesen Beitrag gestoßen, zum Beispiel: Upcoming Header Changes - Preparing Themes and Plugins - also haben sie alles von Legacy-Widgets in Glimmer-Komponenten refaktorisiert? Aber dieses Tutorial besteht nur aus Legacy-Widgets. Was genau sind Glimmer-Komponenten und gibt es Anleitungen dazu? Ich schätze mich glücklich, dass ich das frühzeitig bemerkt habe, bevor ich mit der Entwicklung mit Legacy-Widgets begonnen habe. Vielleicht sollte man in dieser Anleitung einen Hinweis hinzufügen, dass Widgets veraltet sind und nicht mehr verwendet werden sollten?

2 „Gefällt mir“
147

Ok, ich sehe, Glimmer sind neue Ember-Komponenten. Aber ich habe mir den Discourse TOC-Code angesehen und oh mein… was vorher etwa 10 Codezeilen hatte, sind jetzt Hunderte von Zeilen in vielen Dateien mit komplexen Klassen, Dekoratoren usw. Ich vermute, Ember hatte einen React-Moment und beschloss, die Dinge wieder sehr kompliziert zu machen. Es scheint, dass Theme-Komponenten nicht mehr einfach sind, mit einer einfachen Widget-API, sondern umfangreiche Codierung erfordern…

2 „Gefällt mir“
148

@ddsgad ja, Sie haben Recht, die meisten dieser Anleitung sind extrem veraltet. Ich habe in letzter Zeit an allgemeinen Verbesserungen der Dokumentation gearbeitet und hoffe, diese in den nächsten Wochen aktualisieren/ersetzen zu können.

Wie Sie erwähnt haben, können reale Beispiele wie DiscoTOC eine gute Referenz sein. Und hier sind einige spezifische Anleitungen, die aktueller sind:

Für allgemeine Informationen über Ember und seine Komponenten empfehle ich einen Blick in die Ember-Anleitungen.

6 „Gefällt mir“
149

Danke für die Links. Sehr hilfreich. Derzeit passen wir hauptsächlich Dinge in einem Discourse-Thema (erster Beitrag) an, um bessere Designs zu erstellen. Daher konnten wir bisher alles mit reinem Vanilla-JavaScript (querySelectorAll usw.) und SCSS machen. Ich denke, wir werden uns vorerst daran halten.

3 „Gefällt mir“
150

Das lange und veraltete Tutorial im OP wurde nun durch allgemeinere Einführungs-/Wegweiserinformationen ersetzt, einschließlich eines Links zu einem brandneuen 7-Schritte-Tutorial, das viel modernere Theme-Entwicklungsmuster verfolgt.

4 „Gefällt mir“
151

Ich habe alles gelesen, es hat mir gefallen! Gut erklärt und eine sehr gute Einführung!

3 „Gefällt mir“
152

Ich liebe diese Anleitungen! Endlich api.decorateCookedElement entschlüsselt, danke nochmals für die hilfreichen Dokumente!

4 „Gefällt mir“