Shortcodes in Hugo verwenden

Hugo bietet eine leistungsstarke Funktion namens Shortcodes, mit der du wiederverwendbare Code-Schnipsel definieren kannst, die du in deinen Markdown-Dateien einfügen kannst. Dies ist besonders nützlich, wenn du häufig wiederkehrende HTML-Strukturen oder ähnliche Inhalte hast.

Schritt 1: Erstelle einen neuen Shortcode

Um einen neuen Shortcode zu erstellen, musst du eine Datei in deinem Hugo-Projekt im Ordner layouts/shortcodes anlegen.

Für dieses Beispiel erstellen wir einen Shortcode namens anfrage.html.

1. Pfad: layouts/shortcodes/anfrage.html
2. Inhalt der Datei:

<form method="post" action="/anfrage/">
    <input type="hidden" name="submit" value="{{ .Get "value" }}">
    <input class="btn btn-primary mt-2" type="submit" value="{{ .Get "button-text" | default "Anfrage" }}">
</form>

Dieser Shortcode definiert ein einfaches Formular, das ein value und einen button-text als Parameter entgegennimmt.

Schritt 2: Verwenden des Shortcodes in Markdown-Dateien

Nachdem du den Shortcode erstellt hast, kannst du ihn in jeder deiner Markdown-Dateien verwenden. Hier ist ein Beispiel, wie du den Shortcode in einer Markdown-Datei aufrufst:

## Anfrage für Service

{{< anfrage value="Anfrage Zahnriemen wechseln" button-text="Zahnriemen wechseln" >}}

Erklärung der Parameter:

• value: Dieser Parameter wird in das versteckte input-Feld eingefügt, das mit dem Formular gesendet wird.
• button-text: Dieser Parameter bestimmt den Text des submit-Buttons. Wenn du diesen Parameter weglässt, wird der Standardwert "Anfrage" verwendet.

Schritt 3: Überprüfen und anpassen

Nachdem du den Shortcode eingefügt hast, kannst du deine Hugo-Website generieren und überprüfen, ob das Formular wie erwartet funktioniert.

Erweiterung und Anpassung

Du kannst den Shortcode weiter anpassen, um zusätzliche Felder oder Stile hinzuzufügen. Das macht Shortcodes besonders mächtig: Sie erlauben es dir, wiederverwendbaren Code zentral zu verwalten und schnell anzupassen.

Beispiel: Erweiterter Shortcode

Wenn du zum Beispiel ein weiteres Eingabefeld für eine E-Mail-Adresse hinzufügen möchtest, könntest du den Shortcode wie folgt erweitern:

<form method="post" action="/anfrage/">
    <input type="hidden" name="submit" value="{{ .Get "value" }}">
    <input type="email" name="email" placeholder="Ihre E-Mail" required>
    <input class="btn btn-primary mt-2" type="submit" value="{{ .Get "button-text" | default "Anfrage" }}">
</form>

Du würdest dann diesen erweiterten Shortcode genauso wie zuvor in deinen Markdown-Dateien verwenden.

Fazit

Shortcodes in Hugo sind eine einfache und effiziente Möglichkeit, wiederverwendbare HTML- oder andere Inhalte in deinen Markdown-Dateien zu verwenden. Mit einem kurzen Code-Schnipsel kannst du komplexe und dynamische Funktionen in deine Hugo-Website einbinden, ohne dass du den gleichen Code immer wieder schreiben musst.