 |
Zusammenfassung | Fügt Obsidian-artige Callouts als Alternative zu Markdown-Zitaten hinzu. |
 |
Vorschau | Theme Creator |
 |
Repository | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Installationsanleitung | So installieren Sie ein Theme oder eine Theme-Komponente |
 |
Neu bei Discourse Themes? | Einsteigerleitfaden zur Verwendung von Discourse Themes |
Diese Theme-Komponente installieren
Diese Theme-Komponente fügt Unterstützung für Obsidian-artige Callouts in Discourse als Alternative zu Markdown-Zitaten hinzu.
Callouts sind eine großartige Möglichkeit, Inhalte hervorzuheben und Notizen, Warnungen oder andere spezielle Nachrichten in Ihren Beiträgen einzufügen.
Verwendung
Um einen Callout zu erstellen, haben Sie mehrere Möglichkeiten.
Markdown-Syntax
Fügen Sie [!type] an die erste Zeile eines Zitats hinzu, wobei type der Typ-Bezeichner ist. Der Typ-Bezeichner bestimmt das Aussehen und Verhalten des Callouts. Um alle verfügbaren Typen zu sehen, lesen Sie den Abschnitt Unterstützte Typen.
> [!tip]
> **Tipp**: Verwenden Sie `Code-Snippets`, um die Lesbarkeit zu verbessern. Sie bieten Klarheit und Präzision.
Vorschau
Sie können den Typ ändern, indem Sie auf das Symbol klicken:
Rich-Text-Editor
Es wird jetzt vollständig unterstützt. Bitte beziehen Sie sich auf den Abschnitt Unterstützung für Rich-Text-Editor.
Tastenkürzel
- Strg + q — Fügt einen leeren Callout ein
Symbolleiste
Chat
Eine Schaltfläche in der Symbolleiste zum Einfügen eines Standard-Callouts ist verfügbar.
Benutzerdefinierter Titel
Standardmäßig ist der Titel des Callouts sein Typ-Bezeichner in Groß-/Kleinschreibung. Sie können ihn ändern, indem Sie Text nach dem Typ-Bezeichner hinzufügen:
> [!question] Benutzerdefinierte Beschriftung 🤗
> Callout-Beschriftungen können angepasst werden.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> Sie können auch spezielle Inline-Formatierungen wie dynamische Daten enthalten.
Sie können auch Callouts erstellen, die nur einen Titel haben:
> [!success] gelöst.
Einklappbare Callouts
Sie können einen Callout einklappbar machen, indem Sie ein Plus + oder ein Minus - direkt nach dem Typ-Bezeichner hinzufügen.
+erweitert den Callout standardmäßig-klappt ihn stattdessen ein
> [!todo]- Meine Aufgabenliste
>
> - [x] Dokumentation schreiben
> - [ ] Tests hinzufügen
> - [ ] Code überprüfen
> [!todo]+ Meine erweiterte Aufgabenliste
>
> - [x] Repository erstellen
> - [ ] CI/CD einrichten
> - [ ] In Produktion bereitstellen
Verschachtelte Callouts
Sie können Callouts auf mehreren Ebenen verschachteln.
> [!question] Können Callouts verschachtelt werden?
>
> > [!todo] Ja!, sie können.
> >
> > > [!example] Sie können sogar mehrere Ebenen der Verschachtelung verwenden.
> [!tip]
> Hier ist ein hilfreicher Tipp
>
> > [!info]
> > Mit einigen zusätzlichen Informationen
> >
> > > [!example]
> > > Und ein verschachteltes Beispiel
>
> Zurück zum Haupttipp
Unterstützte Standardtypen
Sie können verschiedene Callout-Typen und Aliase verwenden.
Jeder Typ hat eine andere Hintergrundfarbe und ein anderes Symbol.
Siehe die Einstellungcallouts.
notegesetzt. Weitere Informationen finden Sie im Abschnitt Standardrückfälle.
| Typ | Beschreibung | Aliase |
|---|---|---|
note |
Für allgemeine Notizen und Informationen | - |
abstract |
Für Zusammenfassungen oder Abschnitte mit Abstract | summary, tldr |
info |
Für informative Inhalte | - |
todo |
Für Aufgabenlisten oder To-Dos | - |
tip |
Für Tipps und wichtige Informationen | hint, important |
success |
Für Erfolgsmeldungen | check, done |
question |
Für Fragen und FAQs | help, faq |
warning |
Für Warnungen | caution, attention |
failure |
Für Fehlermeldungen | fail, missing |
danger |
Für Gefahren- oder Fehlermeldungen | error |
bug |
Für Bug-Berichte oder bekannte Probleme | - |
example |
Für Beispiele | - |
quote |
Für Zitate | cite |
Anpassung
Symbol
Sie können entweder ein FontAwesome-Symbol verwenden oder direkt ein SVG-Element angeben.
SVG-Element
Obwohl die kostenlose FontAwesome-Version viele Möglichkeiten bietet, fühlen Sie sich manchmal möglicherweise eingeschränkt.
Sie können ein SVG-Element <svg>...</svg> angeben.
Beispiel: Lucide-Symbole – Es ist ein großartiges Set mit dem Vorteil, die Strichstärke auswählen zu können.
- Wählen Sie ein Symbol aus
- Passen Sie die Strichstärke an
- Klicken Sie auf SVG kopieren
- Gehen Sie zu den Einstellungen der Theme-Komponente und fügen Sie den Inhalt ein
Standardrückfälle
Sie können Standardwerte festlegen, wenn ein angegebener Callout-Typ nicht gefunden wird, mit folgenden Einstellungen:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse ist fantastisch]
> Ja.
Globale Konfiguration
Sie können verschiedene Aspekte der Callouts anpassen durch:
- Hintergrundtransparenz
- Randeigenschaften (Breite, Stil, Farbe, Radius)
- Innenabstand
- Titelschriftart-Eigenschaften (Größe, Fettstärke)
- Abstand zwischen Symbol und Titel
Callout-spezifische Konfiguration
Jeder Callout-Typ kann angepasst werden mit:
- Benutzerdefiniertes Symbol
- Titeltext
- Farbschema
- Randeigenschaften
Siehe den Abschnitt Einstellungen unten.
Einstellungen
Liste
| Einstellung | Beschreibung |
|---|---|
| callouts | Definiert die Callouts. |
| callout_fallback_type | Der Standard-Callout-Typ, der verwendet wird, wenn der angegebene Typ nicht gefunden wird. Standardwert: note |
| callout_fallback_icon | Das Standard-Symbol, das verwendet wird, wenn der angegebene Typ nicht gefunden wird. Standardwert: far-pen-to-square |
| callout_fallback_color | Die Standardfarbe, die verwendet wird, wenn der angegebene Typ nicht gefunden wird. Standardwert: #027aff |
| callout_background_opacity | Die globale Hintergrundtransparenz für den Callout (1 bis 100). Standardwert: 10 |
| callout_border_width | Die globale Randbreite für den Callout. Standardwert: leer |
| callout_border_style | Der globale Randstil für den Callout. Standardwert: leer |
| callout_border_color | Die globale Randfarbe für den Callout. Standardwert: leer |
| callout_border_radius | Der globale Randradius für den Callout. Standardwert: var(--d-border-radius) |
| callout_padding | Der globale Innenabstand für den Callout. Standardwert: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | Die globale Schriftgröße für den Callout-Titel. Standardwert: inherit |
| callout_title_font_weight | Die globale Schriftstärke für den Callout-Titel. Standardwert: bold |
| callout_title_gap | Der globale Abstand zwischen Callout-Symbol und Titel. Standardwert: 0.5em |
| callout_icon_sizep | Die globale Größe für das Callout-Symbol. |
| callout_transition_duration_ms | Die Dauer der Öffnungs- und Schließanimation (ms). |
| svg_icons | Liste der in dieser Theme-Komponente verwendeten FontAwesome 6-Symbole. |
Callout-spezifische Einstellungsseite:
| Einstellung | Beschreibung |
|---|---|
| Typ* | Der Typ des Callouts. Dieser Bezeichner wird in der Callout-Syntax verwendet: [!type] |
| Alias | Die Aliase für den Callout, getrennt durch |.Beispiel: cite|quote |
| Symbol | Das fontawesome-Symbol für den Callout. Sie müssen es möglicherweise zur Einstellung svg_icons hinzufügen, wenn es nicht im Standard-Subset verfügbar ist.Alternativ können Sie direkt ein SVG-Element angeben, z. B. <svg>...</svg> |
| Symbolgröße | Die Größe für das Callout-Symbol. Hinweis: Verwenden Sie nur gültige CSS-Werte, z. B. 1em, 16px, 1.5rem |
| Titel | Der Titel für den Callout. Wenn kein Titel im Callout angegeben ist, wird diese Einstellung verwendet. Hinweis: Wenn beide leer sind, ist der Titel der Callout-Typ. |
| Farbe | Die Farbe für den Callout. Dies wird für den Hintergrund, den Titel und das Symbol verwendet. Hinweis: Verwenden Sie nur hexadezimale Farbcodes, z. B. #027aff |
| Randbreite | Die Randbreite für den Callout. |
| Randstil | Der Randstil für den Callout. |
| Randfarbe | Die Randfarbe für den Callout. Wichtig: Wenn Sie CSS-Funktionen verwenden, um einen Alpha-Wert zu erzeugen, wie z. B. rgba, stellen Sie sicher, dass keine Leerzeichen zwischen den Werten verwendet werden, z. B. rgba(145,145,145,0.1) |
| Randradius | Der Randradius für den Callout. |
* Erforderliche Einstellung
Unterstützung für Rich-Text-Editor
Diese Komponente unterstützt jetzt den Discourse Rich-Text-Editor, was das Erstellen, Bearbeiten und Organisieren von Callouts erleichtert.
Erstellen von Callouts
Sie können Callouts auf verschiedene Arten einfügen:
- Tastenkürzel: Strg + Q
- Symbolleistenschaltfläche
- Eingaberegeln:
/callout<:type>!!<type>
- Einfügeunterstützung
Video
Bearbeiten von Callouts
Die Steuerelemente zum Bearbeiten eines Callouts erscheinen nur, wenn Sie ihn zuvor ausgewählt haben.
-
Typauswahl
Wenn Sie auf das Symbol klicken, erscheint ein schwebendes Menü. -
Benutzerdefinierter Titel
Unterstützt Inline-Formatierung und Emojis -
Einklappen
Callouts können als einklappbar festgelegt werden. Dies kann über das Optionen-Menü erreicht werden.
Video
Steuerelemente zum Verschieben
-
Desktop
- Ziehen und Ablegen mit einem Griff
-
Touch-Geräte
- Callouts nach oben/unten verschieben
- In benachbarte Callouts verschachteln
- Standardmäßig deaktiviert (kann in den Optionen aktiviert werden)
Video
Tastaturnavigation
Verbessert die Navigation innerhalb verschachtelter Callouts:
- ← am Anfang des Titels öffnet die Typauswahl
- ↑ / ↓ in leeren Bereichen erstellt/entfernt Absätze
- Enter im Titel bewegt den Cursor in den Körper
Video
Klicken zum Einfügen
- Klicken Sie in leere Bereiche, um einen Absatz zu erstellen
- Optionale Schaltflächen ermöglichen das Einfügen von Inhalten innerhalb oder außerhalb von Callouts
Video
Roadmap
Zukünftige Entwicklungspläne können Folgendes umfassen:
- Autocomplete-Typen beim Tippen
Credits
- @StefanoCecere – Feature-Anfrage, Style blockquotes as callouts in Obsidian
Ihre Website funktioniert möglicherweise nicht, da ein Theme / eine Komponente Fehler aufweist.
