Hallo zusammen! Ich nutze Discourse teilweise als Wiki für meine Interessengruppe – ich würde wirklich gerne Infoboxen haben, um diese Artikel auf das nächste Level zu heben.
Hat jemand das in Discourse integriert? Ich kann keine Plugins oder Theme-Komponenten dafür finden.
Ich habe jemanden gefunden, der eine Wiki-ähnliche Infobox-Vorlage auf Obsidian zum Laufen gebracht hat – vielleicht wäre das ein guter Ausgangspunkt.
Vielleicht eine generische BBCode-Wrapper-Funktion verwenden.
Erstellen Sie eine Theme component und fügen Sie dies zu CSS Common hinzu.
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
//* Zeile unten auskommentieren, um die Hintergrundfarbe zu ändern. Dann sollte jedoch die BBCode-Hintergrundfarbe verwendet werden können.
// background-color: var(--secondary);
//* Farbe & Dicke des Rahmens
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #808080;
border-radius: 0.40em;
}
Hinweis: Mehrere Kopien des obigen Codes für verschiedene Farben erstellt. Z.B. „greenbox“, „yellowbox“, „bluebox“ und „box“ (grau)
Wie man es im Beitrag verwendet
[wrap=redbox]
> ## Info box
Testing boxes
[/wrap]
Ersetzen Sie „red“ durch die entsprechende Farbe. Für Grau nur „box“.
Hinweis 2: Wenn Sie BBCode-Farbe Plugin oder Theme component verwenden, anstatt „>“ (Leerzeile als Trennzeichen erforderlich) zu verwenden, oder Sie könnten bgcolor= verwenden.
Colored Text TC Da dies eine Theme-Komponente ist, kann sie unabhängig vom Hosting installiert werden.
Es gibt 2 #plugins, die BBCode-Farbe unterstützen. Bbcode color oder Formatting Toolbar. Warnung: Installieren Sie nur eines dieser Plugins; Ich glaube, die Formatierungs-Toolbar warnt davor, dass die Installation beider Ihre Website beschädigen wird.
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ff0000;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #00ff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #0000ff;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ffff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ffff00;
border-radius: 0.40em;
}
Verwenden Sie diesen Code in Beiträgen für bgcolor-Boxen:
[Wrap="redboxbg"]
> Infobox
Testen von Boxen
[/wrap]
Neue Hintergrundfarben-Optionen Ersetzen Sie “red” durch:
