Beitragsinhalte mit eigenen Stilen anpassen

[Discourse]

Voraussetzungen

Um diese Tipps und Tricks anwenden zu können, müssen Sie Administrator einer selbst gehosteten Discourse-Instanz oder eines Discourse-Hosted-Plans sein, der über dem Basic-Plan liegt.

Einführung

Discourse unterstützt mehrere Methoden, um den Inhalt eines Beitrags zu formatieren und anzupassen. Die Liste finden Sie hier:

Formatting posts using markdown, BBCode, and HTML

This reference guide details all the formatting options available in Discourse posts, including markdown, BBCode, and HTML. It specifies what is supported and provides resources where you can see examples. Required user level: All users Understanding supported formatting in posts While plain text is sufficient for most replies, Discourse allows users to enhance the formatting of their posts by using markdown, BBCode, and HTML. This guide explains what types …

Manchmal möchten Sie jedoch etwas Spezifischeres, zum Beispiel einen Link, der wie eine Schaltfläche aussieht.

Genau solche Anpassungen lernen wir hier kennen.

Die Logik

Ich erkläre kurz die dahinterstehende Logik, aber Sie können auch direkt zum nächsten Schritt springen und ein praktisches Beispiel ausprobieren

Discourse erlaubt in Beiträgen beliebige HTML-Attribute, die mit data- beginnen.
Diese Attribute werden wir mit CSS ansprechen, um unseren Inhalt anzupassen.

In diesem Tutorial nenne ich sie data--Attribute

Eine Möglichkeit, Elemente mit diesen Attributen zu erstellen, ist ein BBCode-ähnliches Tag: [wrap], dem wir einen beliebigen Wert hinzufügen können. Hier wählen wir „button

[merefield (Robert)]

Danke @Canapin

Ein gutes Beispiel für eine Theme-Komponente, die einige dieser Konzepte verwendet, ist diese:

Discourse Coloured Text

“BBCode-lite” without the need to install a plugin … Adds a simple control (palette icon) to the Composer to facilitate colouring of the foreground and background of text [image] Select a word or text Hit the palette control It will be wrapped like so: [wrap=color color=# bgcolor=#]word[/wrap] Replace the #s with html-compatible colour names, e.g. “red”, “grey” … experiment. NB Same caveats apply as to BBCode: can be used to hide text. Credits Uses @j.jaffeux’s Generic bbco…

[UnitedFreedom (James)]

Gute Arbeit!

Ich bin gespannt, welche kreativen Lösungen Benutzer mit dem data-Attribut noch entwickeln werden.

---

Gibt es einen Vorteil bei der Verwendung von HTML <span data-button> gegenüber BBCode [wrap="button"]?

[Canapin (Coin-coin le Canapin)]

@UnitedFreedom

Gibt es einen Vorteil bei der Verwendung von HTML <span>data-button></sub> gegenüber BBCode [wrap="button"]?

Ohne viel darüber nachzudenken, würde ich sagen, dass die Verwendung eines <span> es Ihnen ermöglicht, ein inline-Element als einzigen Inhalt in einer einzelnen Zeile zu platzieren.

Die Verwendung von [wrap] in einer einzelnen Zeile ohne weiteren Inhalt daneben gibt automatisch ein block-Element aus. Der Text darin wird auch mit Absatz-Tags <p> umschlossen.

Abgesehen davon ist es wahrscheinlich Geschmackssache. Ich habe auch nicht erwähnt, dass ein [wrap] und ein HTML-Element mehrere -data-Attribute haben können, da ich nicht glaube, dass dies für die meisten Zwecke sehr nützlich ist.

[UnitedFreedom (James)]

So fügen Sie Bootstrap-„Karten“ in Ihre Beiträge/Themen ein

…manche mögen sagen, das ist verrückt, zu kompliziert oder übertrieben, aber ich liebe es

• Einige Farben hinzugefügt, um die Verschachtelung des BBCode besser erkennen zu können.

STOPP! Verwenden Sie meinen Code nicht

Verwenden Sie stattdessen den verbesserten Code von @Canapin HIER KLICKEN

BBCode zum Einfügen in Thema/Beitrag

[wrap="card"]
[wrap="card-header"]**Kartenkopfzeile**[/wrap]
[wrap="card-body"]
[wrap="card-title"]**Kartentitel**[/wrap]
[wrap="card-text"]Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext[/wrap]
[/wrap]
[/wrap]

CSS-Code zum Hinzufügen zum Thema.

// Bootstrap Card Box
[data-wrap="card"] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

// Bootstrap Card Header
[data-wrap="card-header"] {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background: #007bff;
    color: #fff;
    border-radius: 5px 5px 0px 0px;
    
}

// Bootstrap Card Body
[data-wrap="card-body"] {
    flex: 1 1 auto;
    padding: 1rem 1rem;
}

// Bootstrap Card Title
[data-wrap="card-title"] {
    margin-bottom: 0.5rem;
}

// Bootstrap Card Text
[data-wrap="card-text"] {
    margin-top: 0;
    margin-bottom: 1rem;
}

[Canapin (Coin-coin le Canapin)]

@UnitedFreedom

zu kompliziert

Natürlich hängt es davon ab, was Sie hineinlegen möchten, aber um das exakt gleiche visuelle Ergebnis wie in Ihrem Beispiel zu erzielen, können Sie Ihren Code erheblich optimieren:

[wrap="card-header"]**Kartenkopfzeile**[/wrap]
[wrap="card-body"]
**Kartenüberschrift**

Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext, Kartentext
[/wrap]

[data-wrap="card-header"] {
    padding: 0.5em 1em;
    border: 1px solid rgba(0,0,0,.125);
    border-bottom: 0;
    background: #007bff;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

[data-wrap="card-body"] {
    padding: 1em;    
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0 0 5px 5px;
}

[UnitedFreedom (James)]

Ahhh! Das ist so viel besser! Vielen Dank für die Verbesserungen! <3

[Andy_Clifton]

Schön! Wann wird das Markdown im [wrap]...[/wrap]-Element verarbeitet, oder gibt es einen Trick, um es rendern zu lassen, bevor es in den Wrap aufgenommen wird?

Zum Beispiel habe ich versucht, Text im Element als fett oder kursiv zu formatieren, und es wird nicht so gerendert – ich sehe nur _text_ oder **text** auf der Seite in meinem Browser, sobald ich sie speichere

[Canapin (Coin-coin le Canapin)]

Es scheint tatsächlich so zu sein, dass Formatierungen (egal ob HTML, Markdown oder BBcode) in [wrap] nicht funktionieren, wenn es sich um ein Inline-Element handelt (wenn sich anderer Inhalt in derselben Zeile befindet):

Dafür müssen Sie einen <span> erstellen.