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