Also bist du daran interessiert, ein eigenes Theme für Discourse zu gestalten? Dann bist du hier genau richtig 
Dieser Leitfaden konzentriert sich stärker auf die SCSS/CSS-Aspekte bei der Arbeit mit Themes in Discourse. Wenn du dich auch mit JS/EmberJs/Handlebars auskennst, kannst du noch tiefer einsteigen, indem du diesen Leitfaden anschaust.
Ich werde dir meine persönliche Methode zum Gestalten und Thematisieren in Discourse beschreiben. Wie bei den meisten Dingen gibt es VIELLEICHTE Wege, um eigene Designs umzusetzen. Ich nutze die Inspektoren-Tools gerne ausgiebig, wenn ich Themes erstelle, und werde dir in diesem Beitrag ein paar Mal zeigen, wie ich das mache.
Einrichtung für das Thematisieren
Bitte lies dir den Einsteigerleitfaden zur Verwendung von Discourse-Themes sowie die Struktur von Themes… durch, bevor du weitermachst. Tiefes Wissen ist an dieser Stelle nicht erforderlich, aber diese Artikel geben dir etwas mehr Vertrautheit, bevor du beginnst.
Um am besten mit dem Thematisieren in Discourse zu arbeiten, schlage ich vor, sich mit den folgenden Dingen einzurichten, um sich den schnellsten und effizientesten Designprozess zu ermöglichen. Diese Schritte ermöglichen es dir, deine Änderungen zu sehen, während du sie machst, ohne vom Admin-Panel einer Discourse-Seite aus „speichern“ zu müssen und neu zu laden.
Es ist absolut möglich, diesen Leitfaden mit der Admin-Konsole zu durchlaufen (vorausgesetzt, du hast Admin-Zugriff auf ein Discourse-Forum.)
- Installiere die Discourse Theme CLI und lies das Thema durch, um zu verstehen, was sie kann.
- Rufe einen API-Schlüssel von https://discourse.theme-creator.io/ ab
- Melde dich mit deinem Meta-Konto an
- Klicke auf Meine Themes
- Klicke auf API-Schlüssel
- Klicke im Popup-Fenster auf API-Schlüssel generieren und kopiere den für dich generierten Schlüssel (wir werden diesen gleich verwenden)
Ausführen der Discourse Theme CLI
Wenn die Discourse Theme CLI installiert ist und dein API-Schlüssel bereitsteht, öffne deinen bevorzugten Texteditor oder dein Terminal-Fenster und wechsle das Arbeitsverzeichnis an die Stelle, an der du dein Theme-Ordner haben möchtest.
Sobald du dort bist, führe den folgenden Befehl aus discourse_theme new your_theme_name und fülle die Eingabeaufforderungen wie folgt aus:
-
Wie möchtest du dein Theme benennen? Wähle deinen Theme-Namen
-
Möchtest du dieses Theme überwachen lassen? Ja
-
Was ist die Root-URL deiner Discourse-Seite?
https://discourse.theme-creator.io/ -
Möchtest du diesen Seitennamen speichern…? Ja
-
Was ist dein API-Schlüssel? Gib den API-Schlüssel ein, den du von Theme Creator abgerufen hast
-
Möchtest du diesen API-Schlüssel speichern…? Ja
-
Wähle Erstellen und mit einem neuen Theme synchronisieren, wenn dazu aufgefordert wird
-
Wähle Nichts tun, wenn nach Child-Theme-Komponenten gefragt wird
Wenn alles korrekt funktioniert hat, solltest du nun in der Lage sein, auf https://discourse.theme-creator.io/ zu Meine Themes zu navigieren und dein neues Theme in der Theme-Liste links zu sehen.
Um diese Änderungen in Echtzeit anzuzeigen, klicke auf deinen Theme-Namen und dann im unteren Bereich des Informationsbereichs auf Vorschau
Die Theme CLI überwacht nun auch alle Änderungen im neu erstellten Verzeichnis und wird bei jeder Änderung speichern sowie das Theme auf Theme Creator aktualisieren.
Erste Schritte
Die Discourse Theme CLI hat für uns ein Theme-Gerüst innerhalb des Ordnernamens erstellt, den wir im Befehl, den wir zuvor ausgeführt haben, angegeben haben. Es werden viele Dateien generiert, die wir nicht verwenden werden, daher werden wir alles außer den folgenden Dateien löschen:
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
Führe im Verzeichnis auch rm -rf .git aus, um die Git-Versionierung zu entfernen, da sie für diesen Leitfaden nicht benötigt wird.
Dein Theme-Verzeichnis sollte nun so aussehen:
Es ist erwähnenswert, dass die Stile, die wir zu diesen Dateien hinzufügen, in ihrem jeweiligen Anwendungsbereich gerendert werden. Stile in common.scss werden auf Desktop + Mobil angewendet, während Stile in desktop.scss nur auf Desktop-Browsing angewendet werden und die in mobile.scss nur auf mobile Ansichten.
Hello World (in Farbe)
Discourse verwendet SCSS für seine Gestaltung, daher möchtest du dich vielleicht mit SASS vertraut machen, um Stile am besten zu nutzen, aber wenn nicht, kannst du diesem Leitfaden trotzdem folgen.
Ok, jetzt zu dem, worauf wir alle gewartet haben… THEMING!
Derzeit hat unser about.json noch keine definierten color_schemes, also füge den folgenden Code in diesen Abschnitt ein und speichere ihn dann.
{
"name": "my theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
Wenn du deinen Browser geöffnet hast, hast du keine Änderungen in Kraft treten sehen, weil dies das Standard-Farbschema ist, das verwendet wird, wenn kein Schema vorhanden ist.
Theme-Übersicht
Um in diesem Leitfaden etwas zu haben, was wir tatsächlich umsetzen können, werde ich dich durch die Erstellung eines einfachen Themes basierend auf dieser Farbpalette führen.
Ändern der Hintergrundfarbe + Primäre Textfarbe
Lass uns etwas sehr Einfaches tun. Wir werden den "Secondary"-Wert unseres aktuellen Farbschemas ändern. Lass uns ihn auf "secondary": "EEF4F7" ändern (dies ändert die Hintergrundfarbe.). Lass uns auch den "primary"-Wert auf "203243" ändern.
Mit nur dieser Zeile haben wir bereits das Aussehen und Gefühl unseres Forens geändert. Viele Anpassungen können allein durch die Bearbeitung der Farben im Farbschema vorgenommen werden.
Verwendung des Farbschemas
Alle folgenden Schlüssel sind in der about.json-Datei unter dem entsprechenden Farbschemanamen definiert. Diese Beschreibungen sind eine gute Referenz, um zu verstehen, wozu der Hauptzweck jedes Variablennamens dient:
| Farbe | Beschreibung |
|---|---|
| primary | Die meisten Texte, Icons und Rahmen |
| secondary | Die Haupt-Hintergrundfarbe und Textfarbe einiger Buttons |
| tertiary | Links, einige Buttons, Benachrichtigungen und Akzentfarbe |
| quaternary | Navigationslinks |
| header_background | Hintergrundfarbe des Site-Headers |
| header_primary | Texte und Icons im Site-Header |
| highlight | Die Hintergrundfarbe von hervorgehobenen Elementen auf der Seite, wie Beiträgen und Themen |
| danger | Hervorhebungsfarbe für Aktionen wie das Löschen von Beiträgen und Themen |
| success | Dient zur Anzeige, dass eine Aktion erfolgreich war |
| love | Die Farbe des Like-Buttons |
Jede dieser Variablen steht uns zur Verfügung, um sie in unseren SCSS-Dateien wie folgt zu verwenden.
body {
background-color: var(--primary);
}
Es werden auch andere Versionen jeder Farbe erstellt, die wir verwenden können. Dinge wie var(--primary-medium) oder var(--primary-very-low) können verwendet werden, um verschiedene Töne derselben Farbe zu erhalten.
Lass uns die anderen Farben in unserem “Default”-Farbschema ändern, um dies zu entsprechen:
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
Du kannst alle verfügbaren Variablen sehen, die in deinen SCSS-Dateien verwendet werden können, indem du auf den Style Guide-Link klickst, während du dein Theme auf Theme Creator in der Vorschau anzeigst, und dann auf Farben im linken Menü klickst.
Der Styleguide ist ein sehr hilfreicher Abschnitt, den man sich ansehen sollte, wenn man ein benutzerdefiniertes Theme erstellt. Jeder Atom zeigt dir, wie bestimmte Elemente von Discourse mit deinen angewendeten Stilen aussehen werden.
Tiefer einsteigen
Nachdem wir den vorherigen Abschnitt hinter uns haben, denke ich, dass es Zeit ist, ein wenig tiefer einzusteigen, was in Discourse nur mit SCSS möglich ist. (Hinweis: SEHR VIEL!)
Styling des Headers
Du wirst feststellen, dass unsere vorherigen Änderungen am Farbschema etwas zu wünschen übrig lassen, was unseren Header betrifft. Die Icons sind kaum sichtbar!
Der Discourse-Header enthält einen Container (mit einer Hintergrundfarbe), um ein Site-Logo sowie die Navigationsicons auf der rechten Seite aufzunehmen. All dies kann angepasst werden.
Die Zielklasse, um den Header anzupassen, ist .d-header.
In unserer common/common.scss-Datei fügen wir Folgendes hinzu:
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
Dies entfernt den Standard-Box-Schatten auf dem Header, gibt ihm etwas mehr Höhe und setzt auch einen unteren Rahmen, um uns etwas Trennung zu geben.
Für die Icons – Innerhalb der SCSS-Klammern von .d-header fügen wir diesen verschachtelten Code hinzu.
.d-header {
// ...vorheriger Code
.d-icon {
color: var(--primary-low-mid);
}
}
Das sieht gut aus, aber ein scharfes Auge wird feststellen, dass die erhöhte Headerhöhe uns weniger Platz zwischen sich und den restlichen Discourse-Forum-Elementen gegeben hat!
Der Abstand zwischen dem Hauptbereich und dem Header wird vom #main-outlet-Ziel gesteuert. Lass uns diesen Abstand nur ein wenig erhöhen, indem wir Folgendes am unteren Ende deiner common/common.scss-Datei hinzufügen.
#main-outlet {
padding-top: 6.5em;
}
Navigationscontainer
Der Navigationscontainer enthält die folgenden Teile.
Der linke Bereich sind die Kategorie/Tag-Filter-Dropdowns, gefolgt von den Navigationslinks, abgeschlossen mit dem Neuen-Thema-Button.
Kategorie / Tag Dropdown
Lass uns einige Änderungen in diesem Bereich vornehmen. Um dies zu tun, füge Folgendes zu deiner common.scss-Datei hinzu.
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
Hier zielen wir auf .select-kit-header, um ihnen jeweils einen identischen border-radius sowie eine hellere Hintergrundfarbe zu geben.
Wenn du auf eines dieser klickst, öffnet sich ein Dropdown-Menü.
Derzeit hat es auch harte Ecken, also lass uns einige Stile hinzufügen, um diese abzurunden und die Hintergrundfarbe ebenfalls auf die gleiche wie den Header zu ändern.
.navigation-container {
.select-kit.combo-box {
// ...vorheriger Code
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
Dies führt zu folgendem Aussehen…
Wenn du genau hinschaust, kannst du sehen, dass unsere Änderungen einen kleinen Rahmen oben rechts im Suchbereich sichtbar gelassen haben.
Lass uns dies beheben, indem wir in den Inspektor unseres Browsers schauen. Dies ist immer ein super hilfreiches Tool, um zu lernen, welche Klassen/IDs wir targeten müssen, um Stile korrekt anzuwenden.
Mit dem Dropdown-Menü sichtbar, klicke mit der rechten Maustaste auf den Suchbereich und „Inspektiere“ das Element in deinem Browser.
Wir können sehen, dass sich dieses Eingabefeld innerhalb eines div mit der Klasse select-kit-filter befindet.
Wenn wir uns die Regeln ansehen, die auf diesen Selektor angewendet werden, können wir sehen, dass er derzeit einen oberen und unteren Rahmen sowie etwas Padding angewendet hat. Wir möchten nur die obere Rahmen-Stiländerung ändern.
Füge den folgenden Code verschachtelt in der .select-kit-body-scss von früher hinzu.
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...vorheriger Code
.select-kit-filter {
border-top: 0px;
}
}
}
Damit sollte unser Code zum Styling des Navigationscontainers so aussehen.
.navigation-container {
// Category + Tag Drop Down
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
Navigationslinks
Lass uns einige Stile hinzufügen, um diese Navigationslinks so aussehen zu lassen wie dieses:
Lass uns unseren Inspektor wieder verwenden, um herauszufinden, was wir hier targeten sollten.
Wir können sehen, dass sich unsere Navigationselemente innerhalb eines UL mit der Klasse "nav nav-pills ..." befinden
Zurück in unserer common.scss-Datei, unter dem vorherigen Abschnitt, aber immer noch verschachtelt innerhalb von navigation-container, fügen wir Folgendes hinzu:
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
Diese Änderung zielt nur auf unsere Links mit der Klasse active ab, die Kinder von nav-pills sind. Diese Änderung sollte unseren aktiven Link so aussehen lassen:
Das ist in Ordnung, aber ich würde gerne, dass der untere Rahmen nur so weit reicht wie der Text. Um dies zu tun, lass uns Folgendes oberhalb der &.active {-Zeile hinzufügen, was alle A-Links innerhalb der Navigations-<li>-Tags beeinflussen wird.
// ...anderer Code
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...mehr Code
}
}
}
Nun müssen wir den “hover”-Effekt so stylen, dass er dem “active”-Effekt entspricht.
Unter unserem vorherigen &.active fügen wir hinzu
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
Also sollte unser gesamter Navigationscode nun so aussehen:
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
Buttons
Buttons in Discourse gibt es in vielen Formen und Größen. Du kannst eine Auswahl davon im Style Guide im Buttons-Bereich sehen.
Ich möchte die meisten Buttons in diesem Theme abgerundet mit einigen benutzerdefinierten Stilen ändern. Dies wird den + Neues Thema-Button sowie andere Buttons auf der gesamten Site ändern.
Am unteren Ende unserer common.scss-Datei fügen wir Folgendes hinzu:
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
Dies wird unsere Buttons so aussehen lassen:
Jetzt, da unsere Buttons gestylt sind, möchte ich etwas über das Button-Styling und warum es wichtig ist, alle deine Designs zu testen, erwähnen.
Klicke einfach auf ein Thema in deiner Site-Vorschau und drücke dann den Antworten-Button auf einer Themenantwort oder vom Antwortbutton am unteren Ende des Themenstroms. Du wirst sehen, dass unser Button-Styling einige Dinge beeinflusst hat, die wir vielleicht nicht im Sinn hatten.
Ich möchte nicht, dass diese Textbearbeitungs-Buttons von meinem vorherigen Styling beeinflusst werden. Dies erfordert ein bisschen komplexeres SASS/CSS, aber wir können unseren Code dazu bringen, diese Buttons nicht zu :not() beeinflussen. 
Lass uns diese Zeile Code vor unserem aktuellen .btn-Ziel hinzufügen. Dies wird unseren Stilen mitteilen, dass sie nur auf Buttons angewendet werden sollen, die keine Kinder von .d-editor-button-bar sind.
:not(.d-editor-button-bar) > .btn
Ok, das hat super funktioniert… aber warte! Jetzt gibt es diesen seltsamen Rebellen, der seine eigenen Dinge macht.
Wenn ich dies im Browser inspiziere, kann ich sehen, dass dieser Button die Klasse .select-kit-header hat, weil beim Klicken auf dieses Zahnrad weitere Optionen angezeigt werden.
Jetzt, da wir wissen, dass wir diesen Button NICHT targeten wollen, lass uns noch mehr :not()-Funktionalität in unseren Code hinzufügen.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
Dies wird alle Buttons auswählen, die NICHT Kinder von .d-editor-button-bar sind und nicht die Klasse .single-select-header haben. Ich weiß, das ist ein bisschen verwirrend, aber innerhalb von Discourse gibt es viele bewegliche Teile, daher muss das Styling manchmal sehr spezifisch sein, um Elemente korrekt zu beeinflussen.
Ich habe auch bemerkt, dass unser aktuelles Styling den Modal-Schließen-Button seltsam beeinflusst. Wenn du auf etwas klickst, das ein Modal öffnet, kannst du dies sehen, oder noch einfacher, wir können zum Modal-Bereich des Style Guides navigieren.
Um dies zu beheben, werde ich ein weiteres Ziel zu unserem Code hinzufügen.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
Weitermachen…
Ich sehe noch einen Button, der nicht von unserem Code beeinflusst zu sein scheint. Es ist der Tracking-Button, der sich ganz unten in einem Themenpost-Strom befindet.
Ich werde die folgende Zeile, nach einem Komma, zu unserem aktuellen .btn-Code hinzufügen.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
Dies wird den Button, der in diesem Abschnitt erscheint, korrekt targeten, und für jetzt sind wir fertig mit dem Styling des oberen Bereichs unseres Forens.
Wohin von hier aus
Dieser Leitfaden sollte die Oberfläche dessen kratzen, wie du dein eigenes Theme für Discourse anpassen kannst. Ich hoffe, dass du nun mehr Einblicke hast, wie du Bereiche der App für deine eigenen Anpassungen targeten kannst.
Denk daran VIELE Dinge können nur mit SCSS angepasst werden. Wenn du noch tiefer in deine Entwicklung einsteigen möchtest, empfehle ich dir, die oben in diesem Beitrag verlinkten Artikel zu lesen.
Stelle gerne Fragen und ich werde mich gerne bemühen, dir zu helfen oder dich in die richtige Richtung weisen.
Dieses Dokument wird versioniert - Vorschläge für Änderungen auf github.