Canvas bietet eine flexible Vorlage, mit der Sie benutzerdefinierte Themes mit weniger Code erstellen können. Passen Sie Eigenschaften und Konfigurationswerte einfach an, um ein Theme an Ihre Bedürfnisse anzupassen.
Beispielansichten
Die Basisvorlage behält Standardwerte bei und bleibt im Design neutral.
Synchronisieren Sie das Theme mit Ihrer Discourse-Instanz mithilfe des discourse_theme gems.
Gehen Sie zum Admin-Backend und passen Sie diese Theme-Komponenten-Einstellungen manuell an: Kategorie-Banner
Plugin-Outlet → above-main-container Tag-Banner
Unterhalb der Website-Kopfzeile anzeigen → deaktivieren
Oberhalb des Hauptcontainers anzeigen → aktivieren
Bearbeiten Sie scss/properties.scss, um Werte für benutzerdefinierte Eigenschaften zu definieren
Bearbeiten Sie about.json, um Assets, Farbschemata und weitere Theme-Komponenten hinzuzufügen
Ein genauerer Blick auf die Einrichtung
Die Vorlage Canvas Theme erweitert nur das Standard-Theme-Skelett um die Bündelung einiger Theme-Komponenten und das Hinzufügen einiger fertiger Stil-Dateien. Die eigentlichen Funktionen werden von einer separaten Theme-Komponente Canvas Settings übernommen. Diese Komponente erfüllt zwei Funktionen:
Sie weist benutzerdefinierte Eigenschaften zu, die mit der Vorlage verwendet werden können. Eine Tabelle mit allen Eigenschaften finden Sie in der Readme-Datei der Vorlage.
Diese getrennte Einrichtung ermöglicht es Ihnen, ein Theme mit der Canvas-Vorlage zu erstellen und gleichzeitig von den fortlaufenden Fehlerbehebungen und Updates zu profitieren, die über die Komponente bereitgestellt werden.
Beispiel-Themes
Sie können den Code der freigegebenen Beispielansichten überprüfen oder sie als Ihr Starter-Theme aus diesen Repositories installieren:
Die Einstellungen befinden sich beim Theme-Komponenten, die als Canvas Settings installiert sind. Es ist vielleicht etwas irreführend, dass die Einstellungen in der Benutzeroberfläche immer Theme Settings genannt werden, auch bei Theme-Komponenten.
Ich habe die Editor-Version lokal ausprobiert, sie funktioniert größtenteils sehr gut, aber mir sind einige kleine Probleme aufgefallen.
Bei einer Standardinstallation, ohne Änderung von Einstellungen, wird das Tag-Label in der Komponente „Extra Banners“ an der falschen Stelle angezeigt:
Das Kategoriebanner wird ebenfalls an derselben Stelle angezeigt, oberhalb der Seitenleiste. Die neuesten und angesagtesten Themen werden korrekt in der Hauptspalte angezeigt.
Ich vermute, dass es nicht das Ziel des Themes ist, die Admin-Oberfläche vollständig abzudecken, jedoch sehen die hellen und dunklen Editor-Farbpaletten der Admin-Seitenleiste recht unterschiedlich aus. Ich bin neugierig, ob es möglich ist, sie mit der nicht-Admin-Seitenleiste zu harmonisieren.
Das Theme soll Banner neben der Seitenleiste anzeigen, über den above-main-container-Outlet. Die Extra-Banners-Komponente verwendet diesen Outlet standardmäßig, aber die beiden Komponenten für Kategorie- und Tag-Banner werden standardmäßig unterhalb des Headers gerendert. Ich möchte diese Komponenten nicht forken, nur um einen anderen Standard-Outlet festzulegen. Deshalb habe ich diese Anweisungen eingefügt:
Aber wenn das leicht zu übersehen ist, gibt es vielleicht eine bessere Möglichkeit, es auszudrücken?
Ja, das ist einfach genug und scheint ein guter Ansatz für dieses Theme zu sein. Ich habe gerade einen Commit hinzugefügt!
Ah ja, ich sehe, wie wir hierher gekommen sind. Wir möchten die Standardwerte in den Kategorien/Tags-Bannern-Komponenten nicht unbedingt ändern, auch wollen wir sie nicht forken. Es ist kompliziert zu beheben, lassen wir es vorerst so und schauen, ob andere auf dasselbe Problem stoßen.
Die Änderung an der Admin-Seitenleiste sieht schon gut aus, danke!
Könnten diese Anweisungen etwas ausführlicher erläutert werden? Ist es nicht möglich, einfach über die Admin-Oberfläche zu installieren? Danke
EDIT: Ich habe die Installation über die Admin-Oberfläche vorgenommen und es scheint zu funktionieren, außer dass es jetzt nirgends zu geben scheint, wo man SCSS bearbeiten kann.
EDIT: Nie wieder, ich sehe, dass das wahrscheinlich erwartet wird und Sie zeigen, wie man die Theme-Dateien direkt bearbeitet. Ich frage mich, ob dies auf der Roadmap für die Admin-Oberfläche stehen könnte? Zum Beispiel eine Variablenbearbeitung, so wie Sie eine Einstellungsbearbeitung haben.
Ich weiß nicht, was auf der Kern-Roadmap steht, aber eine Sache, die Sie jetzt tun könnten, ist, eine neue Theme-Komponente direkt in der Admin-Benutzeroberfläche zu erstellen:
Und dann deklarieren Sie benutzerdefinierte Eigenschaften in seiner CSS-Datei. Sie könnten entweder nach Eigenschaften in der Readme-Datei suchen. Oder kopieren Sie den Inhalt von properties.scss aus dem Theme-Repository.
Wenn Sie jedoch Änderungen synchronisieren möchten, müssen Sie meiner Meinung nach zu einem lokalen Klon ziehen und dann von dort aus pushen. Etwas wie das hier:
Ich sehe auf GitHub auf Mobilgeräten kein Pluszeichen. Möglicherweise muss ich die Befehlszeilen verwenden, wenn ich zu Hause bin.
Alles, was ich auf dem GitHub-Dashboard sehe, ist die Option, ein neues Repository zu erstellen, aber keine Option zum Beanspruchen. Ich habe ein kostenloses Konto, bin mir also nicht sicher, ob das etwas damit zu tun haben könnte.
Es ist im Vergleich zur Deklaration von benutzerdefinierten Variablen im Stylesheet begrenzt. Aber es ermöglicht Ihnen, mit ein paar verschiedenen Looks zu experimentieren. Ich bin gespannt zu hören, ob das funktioniert!
Ich habe gerade die CSS-Stile für die feste Seitenleiste angepasst, das Scrollen sollte wieder funktionieren!
Die feste Seitenleiste ist jedoch nur eine der Optionen in der Styles-Komponente, die ich im obigen Beitrag erwähnt habe. Wenn Sie weitere Stile anpassen möchten (z. B. das Menü der Seitenleiste mit Abständen versehen), müssen Sie den oben im Abschnitt Verwendung und Ein genauerer Blick auf die Einrichtung erklärten Ansatz befolgen: Verwenden Sie Ihr eigenes Stylesheet mit benutzerdefinierten CSS-Eigenschaften – in diesem Fall wäre das -d-sidebar-row-height.
Ich habe ein neues Beispiel-Theme basierend auf dieser Vorlage zusammengestellt. Wie der Name schon sagt, ist dies eine Hommage an das ursprüngliche Central-Theme!
Ich liebte das Layout und den visuellen Stil von Central und habe einige seiner Funktionen in eigenständige Komponenten verpackt, wie das Benutzerdefiniertes Benutzermenü und mehrere Seitenleistenblöcke.
Mir ist aufgefallen, dass diese Vorlage mit der Seitenleiste und einigen Stilen tatsächlich eine gute Annäherung an das Aussehen und Gefühl des ursprünglichen Themes darstellt.
Auf jeden Fall plane ich nicht, das Central-Theme vollständig neu zu erstellen. Aber ich werde vielleicht immer noch mit einem speziellen Topic-Listen-Stil experimentieren. Wenn Sie neugierig sind und einen Blick darauf werfen möchten, ist das Theme auch hier live: https://central.kostka.studio
Danke für das Teilen dieser Vorlage! Die Flexibilität mit Komponenten und das saubere Design machen es wirklich einfach, sie anzupassen. Ich freue mich darauf, sie auf meiner eigenen Instanz auszuprobieren.
| Zusammenfassung | Starten Sie Ihr Theme-Design schnell mit einer vorbereiteten Theme-Vorlage.
|Zielgruppe| Neue Entwickler, die mit dem Erstellen von Themes für Discourse beginnen möchten. Erfahrene Entwickler, die eine fertige Vorlage verwenden möchten. |
|Repository| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|Installationsanleitung|So installieren Sie ein Theme oder eine Theme-Komponente|
|Neu bei Discourse Themes?| Anfängerleitfaden zur Verwendung von Discourse Themes|
Ein riesiges Dankeschön an Discourse für das Sponsoring der Entwicklung dieses Projekts!
!