Voraussetzungen
Um diese Tipps und Tricks nutzen zu können, müssen Sie Administrator einer selbst gehosteten Discourse-Instanz oder eines Discourse-gehosteten Tarifs höher als Basic sein.
Einführung
Discourse unterstützt mehrere Methoden, um den Inhalt eines Beitrags zu formatieren und anzupassen. Die Liste finden Sie hier:
Manchmal möchte man jedoch etwas Spezifischeres, zum Beispiel einen Link, der wie ein Button aussieht.
Genau diese Art von Änderung werden wir hier lernen.
Die Logik
Ich erkläre kurz die Logik dahinter, aber Sie können auch direkt zum nächsten Schritt übergehen und ein praktisches Beispiel ansehen 
Discourse erlaubt jedes HTML-Attribut, das mit data- beginnt, im Inhalt eines Beitrags.
Diese Attribute werden wir mit CSS verwenden, um unseren Inhalt anzupassen.
Ich nenne sie in diesem Tutorial data--Attribute
Eine Möglichkeit, Elemente mit diesen Attributen zu erstellen, ist ein BBcode-ähnliches Tag: [wrap], dem wir einen Wert unserer Wahl hinzufügen. Hier wählen wir “button” (das könnte auch alles andere sein, sogar der Name Ihres Hundes 
):
[wrap=button]some text[/wrap]
Dies gibt ein HTML-Element mit dem folgenden Attribut aus: data-wrap="button".
Erstes Beispiel: ein rosa Hintergrund
Beginnen wir mit einem praktischen Beispiel. Wir erstellen Text mit einem rosa Hintergrund.
Als Block-Element
Schreiben Sie in Ihrem Beitrag auf einer leeren Zeile:
[wrap=pink]pink text[/wrap]
Dies erstellt ein div-Element mit dem Attribut data-wrap="pink".
Fügen Sie dann das folgende CSS zu Ihrem Theme hinzu.
Gehen Sie zu Admin-Bereich → Anpassen → Themes → Ihr Theme → CSS/HTML bearbeiten → CSS.
Geben Sie den folgenden CSS-Code ein:
[data-wrap="pink"] {
background: pink;
}
Klicken Sie dann auf die Schaltfläche Speichern.
Gehen Sie zurück zu Ihrem Beitrag und sehen Sie sich das Ergebnis an:
Ja, es ist schon schön 
Sie werden feststellen, dass der Hintergrund die gesamte Breite des Beitrags abdeckt. Da unser Wrap das einzige Element auf seiner Zeile ist, gibt es ein Block-Element aus.
Sie können mehr über den Unterschied zwischen Block- und Inline-HTML-Elementen hier erfahren: HTML Block and Inline Elements.
Wenn Sie Ihren rosa Hintergrund auf mehreren Zeilen haben möchten (immer noch als Block), müssen beide Ihre [wrap]-Tags keine anderen Inhalte oder Text auf derselben Zeile haben:
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
So wird es aussehen:
Als Inline-Element
Fügen Sie nun etwas Text vor dem [wrap] hinzu, oder danach, oder beides 
. Zum Beispiel:
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
Hier ist das Ergebnis:
Wenn Text oder andere Elemente auf derselben Zeile wie eines Ihrer [wrap]-Tags sind, wird ein Inline-Element ausgegeben.
Zweites Beispiel: ein Link mit dem Aussehen eines Buttons.
Das Hantieren mit dem [wrap]-Tag kann aus verschiedenen Gründen zu unerwünschten Ergebnissen führen, eines davon ist, dass es je nach Kontext ein Block- oder ein Inline-Element sein kann.
Daher beschreiben wir zwei verschiedene Methoden, die dasselbe Ergebnis erzielen, aber Sie können diejenige auswählen, die Ihnen am besten gefällt 
Ein Inline-Button-Link mit [wrap]
Die Syntax, um einen Link mit Markdown zu erstellen, lautet: [some text](https://some-link.etc).
Um den Text anzupassen und ihn wie einen Button erscheinen zu lassen, fügen wir den Wrap innerhalb der eckigen Klammern ein. Hier ist ein Beispiel:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
Wir werden nicht kommentieren, was dieser Code ausgibt. Sie wissen, dass, weil Sie [wrap=button] geschrieben haben, Sie [data-wrap="button"] in Ihrem CSS ansprechen müssen.
Also, los geht’s, fügen wir etwas schickes CSS hinzu, um es hübsch zu machen! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
Wir werden die CSS-Regeln hier nicht im Detail erklären. Es gibt viele CSS-Ressourcen im Internet, also wenn Sie spezifischere Änderungen vornehmen möchten, müssen Sie sich zuerst darüber informieren.
Das Ergebnis 
:
Sieht das nicht gut aus?
Ein Inline-Button-Link mit normalem HTML-Inhalt
Da Discourse HTML-Code akzeptiert, können wir beschließen, die [wrap]-Tags nicht zu verwenden und stattdessen HTML mit einem data--Attribut zu nutzen. In diesem Beispiel verwenden wir die normale Markdown-Syntax für den Link und umgeben ihn mit <span>-Tags.
Wir können nicht direkt ein Link-<a>-Tag verwenden, da es eine Ausnahme ist und kein data--Attribut zulässt.
Schreiben Sie:
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
Dies gibt einen Link innerhalb eines <span>-Tags mit einem data-button-Attribut aus, was bedeutet, dass das CSS etwas komplizierter wird. Wir müssen sowohl data-button als auch den Link ansprechen:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
Und hier ist das Ergebnis!
Um weiterzugehen
Eine angepasste Liste mit [wrap]
[wrap]-Tags und data--Attribute können in vielen Kontexten verwendet werden und Sie können fortgeschrittenere Inhalte anpassen. Die Grenze ist größtenteils Ihr CSS-Wissen (und in geringerem Maße HTML).
Ich gebe ein einzelnes Beispiel ohne Erklärung, indem ich eine Liste anpasse, in der jedes Element mit einem Katzen-Emoji beginnt:
Text:
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
Ergebnis:
Verwendung der Farbwerte Ihres eigenen Themes
Wenn Sie Benutzern erlauben, verschiedene Themes oder Farben zu verwenden, sehen Ihre Änderungen für jedes Theme möglicherweise nicht gut aus, insbesondere wenn sie zwischen hellen und dunklen Farbschemata wählen können.
Eine gute Praxis ist die Verwendung der Farbwerte von Discourse anstelle von “harten” Farben wie red, #FF0000 oder rgb(255,0,0).
Hier ist ein Beispiel, in dem die Hintergrundfarbe des Buttons die Primärfarbe der aktuellen Palette verwendet und der Text die Sekundärfarbe:
Text:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
So wird es für einen Benutzer aussehen, der das Farbschema Solarized Light verwendet:
Und wenn sie das Farbschema Solarized Dark verwenden:
Fazit
Sie haben nun die Grundlagen, um benutzerdefinierte Elemente mit dem [wrap]-Element und den data--Attributen zu erstellen.
Um fortgeschrittenere Anpassungen vorzunehmen, ist das Lernen von CSS von entscheidender Bedeutung. Sie werden viele Tutorials im Internet finden.
Der folgende Leitfaden von Discourse kann auch hilfreich sein: Making custom CSS changes on your site.
Die Entwickler-Tools Ihres Internet-Browsers zeigen Ihnen auch leicht die Liste der Farbwerte von Discourse und wie jedes aussieht:
Vorschläge für Änderungen an diesem Leitfaden sind willkommen!
Dieses Dokument wird versioniert - Vorschläge für Änderungen auf github.
