Fryboyter

Hinweise in Artikeln unter Hugo einfügen

Veröffentlicht am 4. Januar 2022  | Comments  | English version

Kürzlich habe ich einen Artikel veröffentlicht, der sich auf einen älteren Artikel bezogen hat, der somit im Grunde nicht mehr relevant ist. Da ich diesen aber nicht löschen will, habe ich mir überlegt in diesem einen entsprechenden Hinweis einzutragen. Also für den Fall, dass jemand den Artikel von 2019 direkt aufruft.

Gelöst habe ich dies mittels eines Shortcodes, der unabhängig von den Artikeln genutzt werden kann. Im Verzeichnis des von mir verwendeten Themes habe ich im Unterverzeichnis shortcodes die Datei notice.html angelegt und folgenden Inhalt eingetragen.

<div class="shortcode-notice {{ .Get 0 }}">
    <div class="shortcode-notice-title {{ .Get 0 }}">
        {{- if len .Params | eq 2 -}}
        {{ .Get 1 }}
        {{ else }}
        {{ .Get 0 }}
        {{- end -}}
    </div>
    <div class="notice-content">{{ .Inner | markdownify }}</div>
</div>

Zusätzlich habe ich im Unterverzeichnis static/css im Theme-Verzeichnis die Datei notice.css angelegt und folgenden Inhalt eingetragen.

.shortcode-notice .notice-content {
    padding: .6em 1em;
	display: block;
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: #666;
    border-radius: 4px;
}

.shortcode-notice-title {
	color: #fff;
	padding-left: 1em;
	font-weight: 700;
	text-transform: capitalize;
    border-radius: 4px 4px 0 0;
}

.shortcode-notice-title.hinweis {
	background-color: rgba(92, 184, 92, .8)
}

 .shortcode-notice.hinweis .notice-content {
	background: #e6f9e6
}

 .shortcode-notice-title.tip {
	background-color: #6ab0de
}

.shortcode-notice.tip .notice-content {
	background: #e7f2fa
}

.shortcode-notice-title.info {
	background-color: #f0b37e
}

.shortcode-notice.info .notice-content {
	background: #fff2db
}

.shortcode-notice-title.warnung {
	background-color: rgba(217, 83, 79, .8)
}

.shortcode-notice.warnung .notice-content {
	background: #fae2e2
}

Will man nun einen entsprechenden Hinweis in einen Artikel eintragen, kann man folgenden Shortcode nutzen.

{{% notice info %}}
Das ist eine Information
{{% /notice %}}

Anstelle von info kann man in der ersten Zeile hinweis, tip und warnung verwenden was zur Folge hat, dass der Hintergrund der Anzeige entsprechend eine andere Farbe hat. Im Falle der Warnung beispielsweise rot. Wem das nicht ausreicht oder zu viel ist, kann natürlich die Einträge in der CSS-Datei erweitern oder entfernen.

Im Falle des bereits angesprochenen, veralteten Artikels von 2019 erzeugt dies folgenden Hinweis.

OSBN | Allgemein
 |  | 
Diese Artikel könnten auch interessant sein:
Hinweis
Ich behalte es mir vor, Kommentare nicht freizuschalten. Die Freischaltung von Kommentaren kann zudem mehrere Tage dauern.