Shortcodes in Grav

Das shortcode-core Plugin erlaubt erweiterte Markup-Syntax direkt im Markdown.

Was sind Shortcodes?

Shortcodes sind kurze Tags in eckigen Klammern, die vom shortcode-core Plugin verarbeitet werden:

[shortcode]Inhalt[/shortcode]

Eingebaute Shortcodes

Alignment

Linksbündig
Zentriert
Rechtsbündig
Blocksatz

Farben

Lila Text
Türkiser Text

Dies ist lila TextDies ist türkiser Text

Schriftgröße

Großer Text
Kleiner Text

Großer TextKleiner Text

Unterstrichen und Durchgestrichen

Unterstrichen
[s]Durchgestrichen[/s]

Unterstrichener Text [s]Durchgestrichener Text[/s]

Listen mit Icons

[ul class="fa-ul"]
[li class="fa-li"][i class="fa fa-check"][/i] Erledigt[/li]
[li class="fa-li"][i class="fa fa-times"][/i] Nicht erledigt[/li]
[/ul]

[li class="fa-li"][i class="fa fa-check" style="color:green"][/i] Erledigt[/li] [li class="fa-li"][i class="fa fa-times" style="color:red"][/i] Nicht erledigt[/li] [li class="fa-li"][i class="fa fa-spinner fa-spin" style="color:blue"][/i] In Bearbeitung[/li]

Spalten-Layout

=== Spalte 1
Inhalt der ersten Spalte
=== Spalte 2
Inhalt der zweiten Spalte

Erweiterte Shortcodes mit anderen Plugins

AboutMe Plugin

[aboutme]

Zeigt ein Autoren-Bio mit Avatar, Name, Beschreibung und Social-Links an.

Anchors Plugin

[anchors]

Generiert automatische Anker-Links für Überschriften (bereits auf dieser Seite aktiv — die 🔗-Icons neben den H2/H3).

BackToTop Plugin

[backtotop]

Fügt einen "Nach oben"-Button hinzu (automatisch aktiv unten rechts).

Breadcrumbs Plugin

[breadcrumbs]

Zeigt den Navigationspfad an (Brotkrumen).

Eigene Shortcodes erstellen

Shortcode-Plugins können über eigene Twig-Dateien erweitert werden:

<?php
namespace Grav\Plugin\Shortcodes;
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
class BoxShortcode extends Shortcode
{
    public function init()
    {
        $this->shortcode->setHandlers('box', function(ShortcodeInterface $sc) {
            $type = $sc->getParameter('type', 'info');
            return '<div class="box box-'.$type.'">'.$sc->getContent().'</div>';
        });
    }
}

Verwendung: [box type="warning"]Achtung![/box]