Hugo - Optische Header Anker Links automatisch erstellen
Hugo kann durch einen Markdown Render Hook automatisch Anker Links für h2 bis h6
Header erstellen und diese durch ein SVG-Symbol anzeigen. Dadurch werden Besucher der Webseite optisch darauf hingewiesen, dass der Header direkt verlinkt werden kann. Die Automatik generiert dies ohne zusätzlichen Arbeitsaufwand.
Voraussetzung für die automatische Erstellung ist eine Hugo Version ab 0.71.0. Goldmark - ist die default library für Markdown ab Version 0.60, aber erst ab Version 0.71.0 werden Markdown Render Hooks für headings unterstützt - Markdown Render Hooks .
Was sind Anker Links?
Wikipedia erklärt die - Anker Links
- recht ausführlich. Hugo generiert auch ohne Render Hook Template für h2 bis h6
HTML Tags eine id
nach dem Muster <h2 id="header-titel">
. Diese id
kann als Sprungmarke <a href="seitenname/#sprungmarke">
innerhalb der Webseite und auch von außerhalb angesprungen werden. Dies erleichtert zum Beispiel die Weitergabe von einem Link, der genau auf einen bestimmten Abschnitt der Webseite zeigt. Oder ermöglicht einem Inhaltsverzeichnis zu diesem Abschnitt zu scrollen. Hugo selber nutzt dies für die Table of Content.
Der Besucher der Webseite sieht ohne Render Hook optisch nichts von dem Anker Link und kann auch keinen Link kopieren. Durch das nachfolgende Render Hook Template wird so ein optischer Platzhalter in Form eines SVG-Symbols erstellt und als kopierbarer Link zur Verfügung gestellt.
Markdown Render Hook Template
Da ich die h2 bis h6
Headerlinks der Hugo Dokumentation schick finde, habe ich diese entsprechend nachgebaut.
themes/tekki
|__
|__ layouts
|__ _default
|__ _markup
|__ render-heading.html
Der Sourcecode für das Render Hook Template sieht wie folgt aus:
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
<a href="#{{ .Anchor | safeURL }}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
<path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
<path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
</svg>
</a>
</h{{ .Level }}>
Der Besucher der Webseite wird durch das SVG-Symbol darauf hingewiesen, dass auf diesen Abschnitt verlinkt werden kann. Der Link kann vom Besucher kopiert und weiterverwendet werden. Wenn der Link in einem Browser aufgerufen wird, erfolgt der Aufruf der Webseite und es wird genau zu dieser Sprungmarke gescrollt.
Wie ein SVG-Symbol eingebunden werden kann, habe ich in meinem Blogbeitrag - Kostenlose Bootstrap SVG-Icons in Hugo benutzen - erklärt.
CSS für das SVG-Symbol
// bootstrap SVG-Icons
.bi {
display: inline-block;
}
.bi-link {
width: 1.2rem;
height: 1.2rem;
color: var(--wk-accent-color-3);
}
Fazit
Durch den Render Hook erstellt sich der optische Anker Link von alleine. Für die SEO Bewertung sind solche Links ebenfalls gut und machen keine Arbeit. Wenn Sie das SVG-Symbol nicht mögen, können Sie den Anker Link um das Heading herumbauen. Dadurch wird der Headingtext als Link angezeigt.
Linkliste zu diesem Beitrag
Das könnte Sie auch interessieren
- Hugo - Mit der Front Matter Variablen slug die URL anpassen
SEO kompatible URL mit der Hugo Front Matter Variablen slug erstellen.
- Hugo - Canonical Pagination Links für Blogbeiträge und Tags
Canonical Links für Pagination Seiten - page/2, page/3 …
Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.