Dies ist ein nicht-technischer Leitfaden, der Sie durch die Anpassung des Brandings und Erscheinungsbilds Ihrer Discourse-Website führt.
Erforderliche Benutzerebene: Administrator
Möchten Sie das Branding Ihrer Website anpassen, wissen aber nicht, wo Sie anfangen sollen? Lesen Sie weiter, um es herauszufinden!
Der Einrichtungsassistent
Discourse ist sehr anpassbar! Ein guter Ausgangspunkt für Website-Anpassungen ist, sich mit Ihrem Administratorkonto auf der Website anzumelden und den Einrichtungsassistenten der Website auszuführen.
Die Option “Mehr konfigurieren” des Einrichtungsassistenten ermöglicht es Ihnen, ein Website-Logo, ein Farbschema, eine Schriftart und einen Startseitenstil für die Website auszuwählen:
Sie können die verfügbaren Optionen direkt auf dieser Seite in der Vorschau anzeigen. Klicken Sie auf die Schaltfläche “Weiter”, wenn Sie die Einstellungen gefunden haben, die für Sie passen. Machen Sie sich keine Sorgen, Sie können diese Einstellungen jederzeit später ändern, wenn Sie feststellen, dass sie nicht das sind, wonach Sie suchen.
Website-Designs
Sobald Sie eine grundlegende Konfiguration vorgenommen haben, ist es an der Zeit, Ihre Website noch weiter anzupassen!
Designs sind umfangreiche Anpassungen, die mehrere Elemente des Stils Ihres Foren-Designs ändern und oft auch zusätzliche Front-End-Funktionen enthalten. Designs haben die Fähigkeit, das Aussehen und Layout Ihres Forums erheblich zu verändern.
Die Kategorie Theme auf Meta beherbergt eine Vielzahl von vorgefertigten Designs, die Sie auf Ihrer Website verwenden können, um das Erscheinungsbild Ihrer Website anzupassen. Dies ist der beste Ort, um nach einem Design für Ihre Website zu suchen. Gehen Sie vor und wählen Sie ein Design aus dieser Kategorie aus, das Sie für Ihre Website verwenden möchten.
Sobald Sie sich für ein Design entschieden haben, das Sie für Ihre Website verwenden möchten, können Sie das Design von der Seite
Admin -> Anpassen -> Designs(erreichbar unter.../admin/customize/themes) zu Ihrer Website hinzufügen. Sie können auch Änderungen an Ihrem Website-Design vornehmen oder sogar ein komplett neues Design von dieser Seite erstellen.Der Anfängerleitfaden zur Verwendung von Discourse-Designs ist ein Crashkurs in den Grundlagen von Discourse-Designs und gibt einen Überblick darüber, wie Designs auf Ihrer Discourse-Website installiert werden. Lesen Sie diesen Leitfaden für Anweisungen zur Installation des von Ihnen gewählten Designs.
Sie können auch weitere Informationen darüber finden, wie Sie Ihre eigenen Designs verwenden, erstellen und teilen können in:
Farbschemata
Sie können Ihre Website weiter anpassen, indem Sie das Farbschema auf der Seite “Admin → Anpassen → Farben” (erreichbar unter
/admin/customize/colors) anpassen.Lassen Sie uns ein neues Farbschema für Ihre Website erstellen, indem Sie auf dieser Seite auf die Schaltfläche “+Neu” klicken:
Wählen Sie ein vorhandenes Farbschema als Basis für Ihr neues Farbschema aus und passen Sie dann die Farben Ihres neuen Schemas an, indem Sie auf die Farbe neben jedem Farbabschnitt klicken:
Vergessen Sie nicht, Ihrem neuen Farbschema einen Namen zu geben und Ihre Änderungen zu speichern, sobald Sie fertig sind!
Sobald Sie mit Ihrem Farbschema zufrieden sind, können Sie es Ihrem aktuellen Design zuweisen und es in der Vorschau anzeigen, um die Änderungen an Ihrer Website live zu sehen.
Ihre Änderungen werden auch automatisch auf der Website angewendet, sobald Sie die Seite aktualisieren.
Weitere Informationen zur Verwendung von Farbschemata in Discourse finden Sie unter:
Create and share a color scheme
Theme-Komponenten
Ähnlich wie bei Designs gibt es in Discourse auch “Theme-Komponenten”, die Sie verwenden können, um oberflächliche Elemente Ihres Foren-Designs zu ändern oder zusätzliche Front-End-Funktionen hinzuzufügen. Sie sind kleiner und gezielter als vollständige Designs und können im Allgemeinen (aber nicht immer) mit anderen Theme-Komponenten kombiniert werden, um ein maßgeschneidertes Forum-Design für Ihre Community zu erstellen.
Die Kategorie Theme component auf Meta enthält alle offiziellen und inoffiziellen Theme-Komponenten von Discourse. Schauen Sie sich die dort aufgeführten Theme-Komponenten an, und wenn Sie eine davon auf Ihrer Website installieren möchten, folgen Sie einfach den Anweisungen hier: Die Discourse Theme-Oberfläche und wie man Theme-Komponenten installiert
Einige der beliebtesten Discourse Theme-Komponenten sind:
- Dark/Light Mode Toggle
- Brand Header
- DiscoTOC - automatic table of contents
- Custom Header Links
- Versatile Banner
Website-Branding
Zusätzlich zu den Logos, die Sie im Einrichtungsassistenten der Website ausgewählt haben, bietet Discourse auf der Seite “Admin → Einstellungen → Branding” (erreichbar unter
/admin/site_settings/category/branding) weitere Einstellungen für das Website-Branding, mit denen Sie benutzerdefinierte Bilder und Logos zu Ihrer Website hinzufügen können.Auf dieser Seite können Sie die folgenden Arten von Logos zu Ihrer Website hinzufügen:
logo- Das Logo-Bild oben links auf Ihrer Website. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von mehr als 3:1. Wenn leer gelassen, wird der Website-Titeltext angezeigt.logo small- Das kleine Logo-Bild oben links auf Ihrer Website, das beim Scrollen nach unten angezeigt wird. Verwenden Sie ein quadratisches Bild von 120 × 120 Pixeln. Wenn leer gelassen, wird ein Haus-Glyph angezeigt.digest logo- Das alternative Logo-Bild oben in der E-Mail-Zusammenfassung Ihrer Website. Verwenden Sie ein breites rechteckiges Bild. Verwenden Sie kein SVG-Bild. Wenn leer gelassen, wird das Bild aus der Einstellunglogoverwendet.mobile logo- Das Logo, das auf der mobilen Version Ihrer Website verwendet wird. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von mehr als 3:1. Wenn leer gelassen, wird das Bild aus der Einstellunglogoverwendet.logo dark- Dunkle Variante für die Einstellunglogoder Website.logo small dark- Dunkle Variante für die Einstellunglogo smallder Website.large icon- Bild, das als Basis für andere Metadaten-Icons verwendet wird. Sollte idealerweise größer als 512 x 512 Pixel sein. Wenn leer gelassen, wirdlogo_smallverwendet.manifest icon- Bild, das als Logo/Splash-Bild unter Android verwendet wird. Wird automatisch auf 512 × 512 Pixel skaliert. Wenn leer gelassen, wirdlarge_iconverwendet.manifest screenshots- Screenshots, die die Funktionen und die Funktionalität Ihrer Instanz auf der Seite mit dem Installationsaufforderung anzeigen. Alle Bilder sollten lokale Uploads mit den gleichen Abmessungen sein.favicon- Ein Favicon für Ihre Website, siehe Favicon - Wikipedia. Um korrekt über ein CDN zu funktionieren, muss es ein PNG sein. Wird auf 32x32 Pixel skaliert. Wenn leer gelassen, wirdlarge_iconverwendet.apple touch icon- Icon für Apple Touch-Geräte. Wird automatisch auf 180x180 Pixel skaliert. Wenn leer gelassen, wirdlarge_iconverwendet.opengraph image- Standard-OpenGraph-Bild (opengraph), das von vielen Apps und Plattformen für Weblink-Vorschauen verwendet wird, wenn eine Seite kein anderes geeignetes Bild hat. Sollte idealerweise quadratisch sein. Wenn leer gelassen, wirdlarge_iconverwendet.twitter summary large image- Twitter-Karte “summary large image” (sollte mindestens 280 Pixel breit und mindestens 150 Pixel hoch sein, darf kein .svg sein). Wenn leer gelassen, werden reguläre Kartenmetadaten mit demopengraph_imagegeneriert, solange dies nicht ebenfalls ein .svg ist.
Zusätzliche Anpassungen
Nachdem Sie ein benutzerdefiniertes Design, ein Farbschema, einige Markenlogos und vielleicht ein paar Theme-Komponenten zu Ihrer Website hinzugefügt haben, sind Sie mit allen grundlegenden Website-Anpassungen fertig!
Wenn Sie immer noch nach weiteren Möglichkeiten suchen, Ihre Discourse-Website anzupassen, empfehlen wir Ihnen, die folgenden Themen zu lesen, die Sie interessieren könnten:
8 „Gefällt mir“
Was bewirkt Manifest-Screenshots eigentlich? Wo werden diese Screenshots verwendet? Ist es, wenn jemand Ihre Community als lokale App über seinen Browser installiert? Sind es die Bilder, die angezeigt werden, wenn Sie Ihre Community mit Discourse Discover auffindbar machen?
Ich sehe diese Screenshots, wenn ich die Option „Zum Startbildschirm hinzufügen“ in Chrome auf meinem Android-Gerät verwende
2 „Gefällt mir“
Interessant! Ich dachte, das tun sie, aber ich habe sie nicht gesehen, als ich sie auf meinem Desktop (Chrome, Windows) installiert habe. Aber vielleicht habe ich ihnen nicht genug Zeit gegeben, um irgendwo zu laden/sich zu verbreiten.
Ich bin froh zu wissen, dass ich mit dem, was sie tun, richtig lag!
1 „Gefällt mir“
Es sieht so aus, als wäre dieser Abschnitt versehentlich weggelassen worden.
1 „Gefällt mir“
Nachdem ich es zweimal gelesen hatte, glaube ich, dass ich es verstanden habe. Die Größenrichtlinien sind oben enthalten. Zum Beispiel:
Ich denke, dass dieser Leitfaden im Allgemeinen ziemlich veraltet ist. Sie können kein Logo mehr hinzufügen oder das Aussehen und Gefühl im Assistenten konfigurieren. Die Admin-Seite für Themen sieht jetzt völlig anders aus, und Farbschemata wurden in Farbpaletten umbenannt.
Die Theme-Komponente für den Umschalter für den Dunkel-/Hellmodus wurde in den Kern verschoben. Und Branding hat eine neue Konfigurationsseite unter /admin/config/logo.
Ich frage mich nur, warum die auf der Konfigurationsseite angegebene Größe von der Beschreibung abweicht, wenn ich die Website-Einstellung betrachte.
600×80 unterscheidet sich von min. 360×120.
1 „Gefällt mir“
Dieses Thema ist nun etwas veraltet, da diese Dinge kürzlich überarbeitet wurden.
Hier sind meine Gedanken zu einigen kleineren (aber wertvollen) Verbesserungsvorschlägen:
2 „Gefällt mir“