Dies ist ein Crashkurs zu den Grundlagen von Discourse-Themes. Die Zielgruppe sind alle, die mit Discourse-Themes nicht vertraut sind. Wenn du bereits Discourse-Themes oder Theme-Komponenten verwendet hast, musst du diese Anleitung wahrscheinlich nicht lesen.
Was sind Themes und Theme-Komponenten?
Ein Theme oder eine Theme-Komponente ist eine Gruppe von Dateien, die zusammengefasst wurden, um Discourse optisch zu verändern oder neue Funktionen hinzuzufügen.
Beginnen wir mit Themes.
Themes
Im Allgemeinen sind Themes nicht miteinander kompatibel, da sie im Wesentlichen unterschiedliche eigenständige Designs sind. Betrachte Themes wie Skins oder wie Launcher auf Android. Du kannst mehrere Launcher installieren, aber du kannst nicht zwei davon gleichzeitig verwenden. Deine Standard-Discourse-Installation kommt mit zwei Themes: Foundation und Horizon.
Foundation ist ein sauberes, klassisches Discourse-Aussehen, während Horizon ein moderneres Design mit mehreren Farbpaletten zur Auswahl bietet (wie Horizon, Royal, Clover, Lily, Violet und Marigold – jeweils mit hellen und dunklen Varianten).
Foundation
und Horizon
Nehmen wir an, 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 „minimalistisches“ Themenlisten-Design
Wie du sehen kannst, kann deine Website je nach gewähltem Theme völlig unterschiedlich aussehen; aber das ist noch nicht alles. Zusätzlich zu Themes unterstützt Discourse auch Theme-Komponenten.
Theme-Komponenten
Wir verwenden den Begriff Theme-Komponente, um Pakete zu beschreiben, die stärker auf die Anpassung eines bestimmten Aspekts von Discourse ausgerichtet sind. Aufgrund ihrer engen Fokussierung sind Theme-Komponenten fast immer miteinander kompatibel. Das bedeutet, dass du mehrere Theme-Komponenten gleichzeitig unter einem beliebigen Theme ausführen kannst. Du kannst dir Theme-Komponenten wie Apps auf deinem Handy vorstellen.
Wie immer sind Beispiele der beste Weg, etwas zu beschreiben, also hier sind ein paar Beispiele für Theme-Komponenten, die hier auf Meta verfügbar sind.
Diese Theme-Komponente nimmt deine vorhandenen Kategoriedetails, einschließlich Name, Beschreibung und Farbe, und generiert ein Banner oben auf den entsprechenden Kategorie-Seiten.
Diese Theme-Komponente fügt einen zusätzlichen oberen Header für Branding mit deinem Logo, Navigationslinks und Social-Icons für sowohl mobile als auch Desktop-Ansichten hinzu. Das Markenlogo kann ein Bild oder Text sein.
Wie du sehen kannst, haben Theme-Komponenten einen viel engeren Fokus. Daher sind sie in den meisten Fällen miteinander kompatibel. Jetzt hast du eine allgemeine Vorstellung davon, was Discourse-Themes und Theme-Komponenten sind. Tauchen wir etwas tiefer ein.
Discourse Theme-Schnittstelle
Schauen wir uns die Schnittstelle für Themes an. Gehe zu your.site.com/admin/customize/themes und du solltest etwas wie dieses sehen:
Dies ist die Standard-Theme-Schnittstelle in Discourse. Hier kannst du eine Reihe von Dingen tun:
- Das standardmäßige aktive Theme festlegen
- Auswählen, welche Themes deinen Nutzern zur Verfügung gestellt werden sollen
- Neue Themes und Theme-Komponenten erstellen
- Neue Themes und Theme-Komponenten importieren
- Theme-Komponenten zu einem Theme hinzufügen
- Farbschemata ändern
- Theme-Einstellungen ändern
- Ein Theme Vorschau
Gehen wir diese einzeln durch.
Das standardmäßige aktive Theme festlegen
Du kannst ein Abzeichen sehen, das anzeigt, dass ein Theme als Standard festgelegt ist:
Jetzt ändern wir das aktive Theme zu Horizon. Du kannst dies über das Menü-Symbol … tun oder indem du auf den Namen des Themes klickst und das Kontrollkästchen auf der Einstellungsseite auswählst:
Das aktive Theme auf deiner Website wird auf Horizon gesetzt. Das bedeutet, dass jeder, der deine Website besucht, dies sehen wird:
Auswählen, welche Themes deinen Nutzern zur Verfügung gestellt werden sollen
Es ist schön, ein Theme für deine Website festlegen zu können, aber weißt du, was noch besser ist? Den Nutzern die Entscheidung zu überlassen. Discourse ermöglicht es dir, deinen Nutzern verschiedene Themes anzubieten, sodass sie das Theme nach ihren Vorlieben einstellen können. Ihre Wahl ist auf ihr eigenes Konto beschränkt und beeinflusst nicht deine Wahl des aktiven Themes oder die Wahl der anderen Nutzer.
Zum Beispiel kannst du das aktive Theme auf das Standard-Theme (Horizon) setzen, aber das Foundation-Theme als Option anbieten. Probieren wir das jetzt in der Theme-Schnittstelle aus.
Alles, was du tun musst, ist auf das Menü-Symbol … zu klicken und dann „Nutzern die Auswahl erlauben“ auszuwählen.
Das war’s! Es wird jetzt ein „nutzerwählbar“-Abzeichen erhalten.
und deine Nutzer können jedes Theme auswählen, das sie bevorzugen, indem sie gehen zu
your.site.com/my/preferences/interface
Neue Themes und Theme-Komponenten erstellen
Um ein neues Theme oder eine neue Theme-Komponente zu erstellen, klicke auf die Schaltfläche „Installieren“.
Dann erscheint ein Dialogfeld. Wähle die Option „Neu erstellen“ im Menü. Du musst einen Namen für das angeben, was du erstellen möchtest, und entscheiden, ob es ein Theme oder eine Theme-Komponente ist.
Wir haben die Grundlagen dessen, was Themes und Theme-Komponenten sind, grob behandelt. Wenn du dich erinnerst, konzentriert sich eine Theme-Komponente normalerweise auf die Änderung eines Bereichs von Discourse. Ein Theme deckt im Allgemeinen mehrere Dinge ab. Du solltest auch beachten, dass ein Theme beliebig viele Theme-Komponenten enthalten kann, während eine Theme-Komponente dies nicht kann. Mach dir dafür jetzt keine Sorgen, eine detailliertere Erklärung dieser Beziehung folgt später.
Nehmen wir an, du hast dich für den Namen entschieden und beschließt, es zu einem Theme zu machen. Nun, sobald du auf die Schaltfläche „Erstellen“ klickst, wird das Theme erstellt und du kannst dann
- Den Namen des Themes / der Theme-Komponente ändern
- Ein Farbschema für das Theme festlegen oder ändern
- Untergeordnete Komponenten zu deinem Theme hinzufügen
- HTML / CSS / JS zu Theme / Theme-Komponente hinzufügen
- Dateien oder Uploads zum Theme hinzufügen
Spezifische Anpassungen liegen außerhalb des Rahmens dieser Anleitung, also werde ich an dieser Stelle hier aufhören.
Die Schnittstelle zum Hinzufügen von HTML / CSS / JS sieht so aus (sobald du auf #4 oben klickst)
Neue Themes und Theme-Komponenten importieren
Wir haben bereits eine Anleitung zum Importieren von Themes, aber ich schließe, wie man das macht, hier ein, da diese Anleitung alle Grundlagen abdecken soll.
Um ein Theme oder eine Theme-Komponente zu importieren, klicke auf die Schaltfläche „Installieren“.
Der Abschnitt „Beliebt“ ermöglicht es dir, aus einer Liste unserer beliebtesten Themes und Komponenten vorab anzusehen/zu installieren.
Du kannst auch Theme-Dateien von deinem Gerät oder über den Link zum Theme-Repository importieren. Der Repository-Link für jedes Theme wird vom Autor im Theme-Thema bereitgestellt. Sobald du ein Theme importierst, gelten alle Dinge, die wir zuvor besprochen haben. Du kannst es als Standard festlegen, nutzerwählbar machen und so weiter.
Wenn du eine Theme-Komponente importierst, kannst du sie auch zu einem deiner Themes hinzufügen. Dies wird im nächsten Abschnitt im Detail behandelt.
Theme-Komponenten zu einem Theme hinzufügen
Nehmen wir an, du magst die Discourse Category Banners Theme-Komponente 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-Komponente zu deinen aktiven / nutzerwählbaren Themes hinzu.
Das kannst du so tun:
Nach dem Import der Komponente gehe zum Theme, zu dem du sie hinzufügen möchtest, und suche den Abschnitt „Enthaltene Komponenten“.
Diese Liste zeigt alle installierten Theme-Komponenten. Von dort aus kannst du Theme-Komponenten zum Theme hinzufügen. Das Hinzufügen der Homepage Feature-Komponente würde so aussehen:
Eine ähnliche Option „Komponente auf diesen Themes einschließen“ existiert von der Seite einer einzelnen Komponente aus. Dies ermöglicht es dir, eine Komponente auf einmal zu mehreren Themes hinzuzufügen.
Das ist pretty much alles. Homepage Feature ist jetzt eine aktive Komponente des Standard-Theme. Wenn du es auch zu einem anderen Theme hinzufügen möchtest, wiederholst du den Prozess des Hinzufügens der Theme-Komponente.
Wenn du das Foundation-Theme als nutzerwählbar festgelegt und die Homepage Feature Theme-Komponente auch dazu hinzugefügt hast, erhalten Nutzer, die das Foundation-Theme als ihr aktives Theme auswählen, auch die Homepage Feature Theme-Komponente, da es ein „Untergeordnetes Theme“ des Foundation-Themes ist.
Du kannst eine unbegrenzte Anzahl von Theme-Komponenten unter einem Theme haben und wie wir zuvor besprochen haben, sind sie normalerweise miteinander kompatibel. Also kannst du etwas wie dies tun:
Und all diese Komponenten wären gleichzeitig auf dem Theme aktiv.
Farbschemata ändern
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 viele Details geben, aber ich zeige dir, wie man Farbschemata verwendet.
Gehe zu your.site.com/admin/config/colors und du wirst sehen:
Von hier aus kannst du Farbschemata bearbeiten oder neue erstellen. Um ein Farbschema zu bearbeiten, klicke darauf und ändere die Farben nach deinem Geschmack.
Um ein neues Farbschema zu erstellen, klicke hier.
Sobald du mit dem Ändern der Farben fertig bist, ist es jetzt an der Zeit, das Farbschema als aktiv in entweder deinem aktiven oder nutzerwählbaren Theme festzulegen. Um dies zu tun, gehe zur Seite des Themes und suche hier.
Theme-Einstellungen
Discourse-Themes können Einstellungen haben. Diese Einstellungen sind so konzipiert, dass du ein Theme oder eine Theme-Komponente einfach nach deinen Bedürfnissen konfigurieren kannst. Zum Beispiel hat die Homepage Feature Theme-Komponente einige Einstellungen, um zu steuern, welche Themen hervorgehoben werden:
Nicht alle Themes / Theme-Komponenten haben Einstellungen, aber für diejenigen, die es tun, werden sie hier immer angezeigt. Einstellungen enthalten normalerweise Anweisungen, die vom Autor bereitgestellt werden, 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 vorab anzusehen, ohne sie als aktiv festzulegen.
Während du auf der Seite eines Themes bist, klicke hier.
und ein neuer Tab wird sich mit einer Live-Vorschau öffnen, wie das Theme auf deiner Website aussehen würde. Du kannst zu verschiedenen Seiten navigieren und sehen, wie alles aussieht. Der beste Teil beim Vorschauen eines Themes ist, dass du Änderungen live testen kannst, ohne Probleme auf deiner Website zu verursachen, falls etwas schief geht.
Zusätzliche Informationen
Safe-Mode
Discourse hat einen eingebauten Weg, das aktuelle aktive Theme zu umgehen, falls etwas schief geht. Zum Beispiel kann ein JavaScript-Fehler im Code einer Komponente dazu führen, dass deine Website nicht richtig funktioniert. Um das aktuelle aktive Theme zu umgehen, besuche einfach
your.site.com/safe-mode
Dann würdest du sehen:
Von dort aus kannst du das aktuelle aktive Theme deaktivieren, zur Theme-Seite navigieren und entweder das Problem beheben oder das Theme dauerhaft deaktivieren.
Neue Themes finden
Der direkteste Weg, neue Themes und Theme-Komponenten 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, sie zu stellen.