Dies ist eine Schnellübersicht über die Grundlagen von Discourse-Themes. Zielgruppe sind alle, die sich nicht mit Discourse-Themes auskennen. Wenn du bereits Discourse-Themes oder Theme-Components verwendet hast, ist dieser Leitfaden wahrscheinlich nichts für dich.
Was sind Themes und Theme-Components?
Ein Theme oder eine Theme-Component ist eine Sammlung von Dateien, die zusammengepackt sind, um Discourse entweder visuell zu verändern oder neue Funktionen hinzuzufügen.
Beginnen wir mit den Themes.
Themes
Im Allgemeinen sind Themes nicht miteinander kompatibel, da sie im Wesentlichen verschiedene, eigenständige Designs darstellen. Stell dir Themes wie Skins oder wie Launcher auf Android vor. Du kannst mehrere Launcher installiert haben, aber du kannst nicht zwei davon gleichzeitig verwenden. Deine Standard-Installation von Discourse kommt mit zwei Themes: Foundation und Horizon.
Foundation bietet einen sauberen, klassischen Discourse-Look, während Horizon ein moderneres Design mit mehreren zur Auswahl stehenden Farbpaletten bietet (wie Horizon, Royal, Clover, Lily, Violet und Marigold – jeweils mit hellen und dunklen Varianten).
Standard
und Dunkel
Sagen wir, das reicht dir nicht und du willst MEHR. Nun, du kannst zusätzliche Themes ziemlich einfach installieren. Hier sind ein paar Beispiele für kostenlose Themes, die hier auf Meta verfügbar sind.
Sams persönliches “minimales” Themenlisten-Design
Wie du siehst, kann deine Website basierend auf dem ausgewählten Theme völlig anders aussehen; das ist jedoch noch nicht alles. Neben Themes unterstützt Discourse auch Theme-Components.
Theme-Components
Wir verwenden den Begriff Theme-Component, um Pakete zu beschreiben, die eher darauf abzielen, einen bestimmten Aspekt von Discourse anzupassen. Aufgrund ihres eingegrenzten Fokus sind Theme-Components fast immer miteinander kompatibel. Das bedeutet, dass du mehrere Theme-Components gleichzeitig unter jedem Theme betreiben kannst. Du kannst Theme-Components wie Apps auf deinem Handy betrachten.
Wie immer sind Beispiele der beste Weg, um etwas zu beschreiben, daher hier ein paar Beispiele für Theme-Components, die hier auf Meta verfügbar sind.
Diese Theme-Component nimmt deine bestehenden Kategoriedetails, einschließlich Name, Beschreibung und Farbe, und generiert einen Banner oben auf den entsprechenden Kategorienseiten.
Diese Theme-Component fügt einen zusätzlichen oberen Header für Branding-Zwecke hinzu, mit deinem Logo, Navigationslinks und Social-Icons für sowohl mobile als auch Desktop-Ansichten. Das Markenlogo kann ein Bild oder Text sein.
Wie du siehst, haben Theme-Components einen viel engeren Fokus. Daher sind sie in den meisten Fällen miteinander kompatibel. Nun hast du eine allgemeine Vorstellung davon, was Discourse-Themes und Theme-Components sind. Tauchen wir etwas tiefer ein.
Discourse Theme-Oberfläche
Schauen wir uns die Oberfläche für Themes an. Gehe zu your.site.com/admin/customize/themes und du solltest etwas Ähnliches sehen:
Dies ist die Standard-Theme-Oberfläche in Discourse. Hier kannst du eine Reihe von Dingen tun:
- Das Standard-Theme festlegen
- Auswählen, welche Themes für deine Benutzer verfügbar sein sollen
- Neue Themes und Theme-Components erstellen
- Neue Themes und Theme-Components importieren
- Theme-Components einem Theme hinzufügen
- Farbschemata bearbeiten
- Theme-Einstellungen ändern
- Ein Theme vorschauen
Gehen wir diese Punkt für Punkt durch.
Das Standard-Theme festlegen
Das kleine Häkchen neben dem Namen des Standard-Themes zeigt an, dass dies das aktive Theme auf deiner Website ist.
Ändern wir nun das aktive Theme auf Dunkel. Klicke auf das Theme Dunkel und du solltest Folgendes sehen:
Das aktive Theme auf deiner Website wird auf Dunkel gesetzt. Das bedeutet, dass jeder, der deine Website besucht, Folgendes sieht:
Und das Häkchen würde dann neben dem Namen des dunklen Themas erscheinen, was anzeigt, dass es das aktive Theme ist.
Auswählen, welche Themes für deine Benutzer verfügbar sein sollen
Es ist schön, ein Theme für deine Website festlegen zu können, aber was ist noch schöner? Deine Benutzer entscheiden zu lassen. Discourse ermöglicht es dir, deinen Benutzern verschiedene Themes anzubieten, sodass sie das Theme entsprechend ihren Vorlieben einstellen können. Ihre Wahl beschränkt sich auf ihr eigenes Konto und hat keinen Einfluss auf deine Wahl des aktiven Themas oder die Wahl der anderen Benutzer.
Zum Beispiel kannst du das aktive Theme auf das Standard-Theme (hell) setzen, aber das dunkle Theme als Option anbieten. Versuchen wir das jetzt. In der Theme-Oberfläche.
Alle aktiven Themes, die du hast, sei es das auf deiner Website festgelegte Standard-Theme oder irgendwelche Themes, die du als vom Benutzer auswählbar markiert hast, werden hier angezeigt:
Allerdings wird nur das Standard-Theme das grüne Häkchen haben.
Versuchen wir nun, das rote Theme beispielsweise benutzerwählbar zu machen.
Du musst nur darauf klicken und dann das Kästchen anhaken, das besagt: „Theme kann vom Benutzer ausgewählt werden“.
Das war’s! Du wirst bemerken, dass es automatisch von der Liste der inaktiven Themes in die Liste der aktiven Themes verschoben wird.
und deine Benutzer können jedes beliebige Theme auswählen, das sie bevorzugen, indem sie zu
your.site.com/my/preferences/interface
gehen
Neue Themes und Theme-Components erstellen
Um ein neues Theme oder eine neue Theme-Component zu erstellen, klicke auf eine der beiden „Installieren“-Schaltflächen.
Dann erscheint ein Dialogfeld. Wähle die Option „Neu erstellen“ im linken Menü. Du musst einen Namen für das angegebene Element angeben und entscheiden, ob es sich um ein Theme oder eine Theme-Component handelt.
Wir haben die Grundlagen dessen, was Themes und Theme-Components sind, grob abgedeckt. Wenn du dich erinnerst, ist eine Theme-Component normalerweise darauf fokussiert, einen Bereich von Discourse zu modifizieren. Ein Theme deckt im Allgemeinen eine Reihe von Dingen ab. Beachte auch, dass ein Theme beliebig viele Theme-Components darunter haben kann, während eine Theme-Component das nicht kann. Mach dir darüber keine Sorgen, eine detailliertere Erklärung dieser Beziehung wird später folgen.
Nehmen wir an, du hast den Namen festgelegt und entschieden, es als Theme zu erstellen. Nun, sobald du auf die Schaltfläche „Erstellen“ klickst, wird das Theme erstellt und du könntest dann
- Den Namen des Themas / der Theme-Component ändern
- Ein Farbschema für das Theme festlegen oder ändern
- HTML / CSS / JS zum Theme / zur Theme-Component hinzufügen
- Dateien oder Uploads zum Theme hinzufügen
- Unterkomponenten zu deinem Theme hinzufügen
Spezifische Anpassungen liegen außerhalb des Rahmens dieses Leitfadens, also höre ich hier an dieser Stelle auf.
Die Oberfläche zum Hinzufügen von HTML / CSS / JS sieht so aus (nachdem du oben auf #3 geklickt hast)
Neue Themes und Theme-Components importieren
Wir haben bereits einen Leitfaden zum Importieren von Themes, aber ich füge hinzu, wie das geht, da dieser Leitfaden alle Grundlagen abdecken soll.
Um ein Theme oder eine Theme-Component zu importieren, klicke auf eine der beiden „Installieren“-Schaltflächen.
Der Bereich „Beliebt“ ermöglicht es dir, aus einer Liste unserer beliebtesten Themes und Components eine Vorschau anzusehen / sie zu installieren.
Du kannst Theme-Dateien auch von deinem Gerät oder über den Link zum Theme-Repository importieren. Der Repository-Link für jedes Theme wird vom Autor im Thementhema bereitgestellt. Sobald du ein Theme importiert hast, gelten alle zuvor besprochenen Punkte dafür. Du kannst es als Standard festlegen, benutzerwählbar machen und so weiter.
Wenn du eine Theme-Component importierst, kannst du sie auch zu jedem deiner Themes hinzufügen. Dies wird im nächsten Abschnitt detailliert behandelt.
Theme-Components einem Theme hinzufügen
Nehmen wir an, du magst die Theme-Component Discourse Category Banners und möchtest sie verwenden. Du würdest wie folgt vorgehen:
- Importiere das Theme aus dem Repository, wie wir oben besprochen haben.
- Füge es als Theme-Component zu deinen aktiven / benutzerwählbaren Themes hinzu.
Das kannst du so machen:
Nach dem Import der Komponente gehe zu dem Theme, dem du sie hinzufügen möchtest, und suche den Abschnitt „Enthaltene Components“.
Diese Liste zeigt alle installierten Theme-Components. Von dort aus kannst du Theme-Components zum Theme hinzufügen. Das Hinzufügen der Theme-Component Versatile Banner würde so aussehen:
Eine ähnliche Option „Component auf diesen Themes einfügen“ gibt es auch auf der Seite einer einzelnen Component. Damit kannst du eine Component mehreren Themes gleichzeitig hinzufügen.
Das war’s im Großen und Ganzen. Discourse Category Banners ist nun eine aktive Component des Standard-Themes. Wenn du es auch zum dunklen Theme hinzufügen möchtest, würdest du den Vorgang des Hinzufügens der Theme-Component für das dunkle Theme wiederholen.
Wenn du das dunkle Theme als benutzerwählbar festgelegt und die Theme-Component Discourse Category Banners ebenfalls hinzugefügt hast, werden Benutzer, die das dunkle Theme als ihr aktives Theme auswählen, auch die Theme-Component Discourse Category Banners erhalten, da sie eine „Untertheme“-Component des dunklen Themas ist.
Du kannst eine unbegrenzte Anzahl von Theme-Components unter einem Theme haben, und wie wir zuvor besprochen haben, sind sie normalerweise miteinander kompatibel. Du kannst also so etwas machen:
Und all diese Components wären gleichzeitig auf dem Standard-Theme aktiv.
Farbschemata bearbeiten
Ein Farbschema ist eine Palette von Farben, die du wählst, um die Farbe der Elemente in einem Theme zu generieren. Ich werde hier nicht zu sehr ins Detail gehen, sondern dir zeigen, wie du Farbschemata verwendest.
Navigiere zu your.site.com/admin/customize/colors und du wirst Folgendes sehen:
Von hier aus kannst du Farbschemata bearbeiten oder neue erstellen. Um ein Farbschema zu bearbeiten, klicke darauf und ändere die Farben nach deinen Wünschen.
Um ein neues Farbschema zu erstellen, klicke hier.
Sobald du die Farben geändert hast, ist es an der Zeit, das Farbschema als aktiv in deinen aktiven oder benutzerwählbaren Themes festzulegen. Gehe dazu zur Seite des Themes und suche hier.
Theme-Einstellungen
Discourse-Themes können Einstellungen haben. Diese Einstellungen sollen eine einfache Möglichkeit sein, ein Theme oder eine Theme-Component nach deinen Bedürfnissen zu konfigurieren. Zum Beispiel hat das Theme Discourse Button Styles einige Einstellungen, um eine einfache Anpassung der Button-Darstellung zu ermöglichen, indem einfach ein paar Werte nach deinen Wünschen geändert werden.
Nicht alle Themes / Theme-Components haben Einstellungen, aber für diejenigen, die welche haben, werden sie hier immer angezeigt. Die Einstellungen enthalten normalerweise Anweisungen des Autors, die dir helfen zu bestimmen, welche Änderungen vorgenommen werden müssen.
Vorschau eines Themes
Manchmal musst du sehen, wie ein Theme auf deiner Website aussieht, bevor du es anwendest. Discourse bietet eine einfache Möglichkeit, Themes vorzusehen, ohne sie als aktiv festzulegen.
Während du auf der Seite eines Themes bist, klicke hier.
und ein neues Tab öffnet sich mit einer Live-Vorschau dessen, wie das Theme auf deiner Website aussehen würde. Du kannst zu verschiedenen Seiten navigieren und sehen, wie alles aussieht.
Das Beste an der Vorschau eines Themes ist, dass du Änderungen live testen kannst, ohne dass Probleme auf deiner Website auftreten, falls etwas schiefgeht.
Zusätzliche Informationen
Safe-Mode
Discourse hat eine integrierte Möglichkeit, das aktuell aktive Theme zu umgehen, falls etwas schiefgeht. Zum Beispiel kann ein JavaScript-Fehler im Code einer Component dazu führen, dass deine Website nicht richtig funktioniert. Um das aktuell aktive Theme zu umgehen, besuche einfach
your.site.com/safe-mode
Du würdest dann Folgendes sehen:
Von dort aus kannst du das aktuell aktive Theme deaktivieren, zur Themenseite navigieren und entweder das Problem beheben oder das Theme endgültig deaktivieren.
Neue Themes erhalten
Der einfachste Weg, neue Themes und Theme-Components zu finden, ist, die Kategorie Customization > Theme hier auf Meta zu überprüfen.
Weiterführende Literatur
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
Wenn du Fragen hast, zögere nicht zu fragen.