Die Shortcodes sind Stichwörter die auf Templates erbaut sind. Sie fügen Funktionnen Markdown hinzu. Wir werden ein einfaches Shortcode um ein Sammelbild in einer Artikel zu anzeigen erstellen.

Wo das Shortcode erstellen

Wir müssen Shortcodes im ..\layouts\shortcodes Ordner erstellen

c:
cd \hugo\bin\sites\blog\layouts
mkdir shortcodes

HTML-Datei Erstellung

mythumbnail.html erstellen

Im früher Ordner

C:\hugo\sites\blog\layouts\shortcodes>dir
14/03/2018  15:21    <DIR>          .
14/03/2018  15:21    <DIR>          ..
14/03/2018  15:21               0 mythumbnail.html

Content ändern

Mit dem Get Befehl können wir die Shortcode-Parametrisierung erzielen.

<a target="_blank" href="{{.Get "src"}}">
    <img class="mythumbnail" src="{{.Get "src"}}" alt="{{.Get "alt"}}">
</a>

Jetzt werden wir das Css-Klass mythumbnail erstellen.

CSS-Datei erstellen

C:\hugo\sites\blog\static\css>dir
15/03/2018  16:46    <DIR>          .
15/03/2018  16:46    <DIR>          ..
15/03/2018  17:02               0 mycss.css

Content ändern

.mythumbnail {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
}

.mythumbnail:hover {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}

CSS-Datei deklarieren

Mit dem beautifulhugo Theme müssen wir die nächsten Datei erstellen

C:\hugo\sites\blog\layouts\partials>type head_custom.html

<link rel="stylesheet" href="{{ "css/mycss.css" | absURL }}" />

Shortcode nützen