How to Headline

Hugo und Headlines #

Hugo bietet für Headlines einen sogennanten Render-Hook an. Das heißt man kann das Verhalten, wie Überschriften aus Markdown-Files gerendert werden, abändern. Dafür legt ihr unter dem Pfad layouts/_default/_markup die Datei mit dem Namen render-heading.html an:

Render-Hook #

Laut Dokumentation erhält dieses File die folgenden Variablen von Hugo als Input:

• .Level – Die hierarchische Ebene der Headline: Also 1 für H1, 2 für H2 usw.
• .Text – Das ist der Text der Headline
• .Anchor – Der Anchor-Link der Headline selbst

Rendern der Überschrift #

Um eine Headline also zu rendern, genügt dieses Snippet:

<h{{ .Level }}>
    {{ .Text | safeHTML }}
</h{{ .Level }}>

Wir wollen allerdings nicht nur den Überschriften-Text hinschreiben, sondern auch automatisch einen Hashtag an das Ende der Headline anzeigen. Dafür erweitern wir das Snippet so:

<h{{ .Level }}>
    <div class="lowlight"></div>
    {{ .Text | safeHTML }} #            
    </div>
</h {{ .Level }}>

Nach dem Überschriften-Text schreiben wir ein Rautesymbol. Zusätzlich legen wir ein div mit der Klasse lowlight um den Überschriftentext. Damit ist jetzt noch nicht viel passiert. Deswegen erweitern wir das Snippet um einen Link:

<h{{ .Level }}>
  <div class="lowlight"></div>
  {{ .Text | safeHTML }}
    <a class="heading-anchor" href="#{{.Anchor}}" aria-label="#" alt="#">
        {{ "#" }}            
    </a>
  </div>
</h {{ .Level }}>

So weit. So gut. Das #-Symbol ist jetzt klickbar. Dem Link-Element haben wir die Klasse heading-anchor mitgegeben. Das hat den Grund, damit wir per Javascript alle Anchor-Elemente einfach selektieren können.

Link kopieren #

Jetzt wollen wir aber nicht nur, dass er klickbar ist, sondern auch, dass er in die Zwischenablage kopiert wird. Deswegen brauchen wir hier das folgende Javascript:

document.querySelectorAll(".heading-anchor").forEach(element => {
    let anchor = element.getAttribute("href");
    element.addEventListener('click', e => {
        copyAnchorLink(anchor);
    }, {once: true})
})

Hier nutzen wir die davor angesprochene Css-Klasse, um alle Anchor-Elemente auf einer Seite zu ermitteln und ihr Klick-Event mit der Funktion copyAnchorLink zu verknüpfen. Dieser Funktion wird das zuvor ausgelesene href-Attribut des Anchor-Elements mitgegeben. Die Funktion müssen wir dann auch noch programmieren. Sie sieht so aus:

function copyAnchorLink(anchorText) {
    placeholders = document.querySelectorAll(".lowlight");
    copyToClipboard(anchorText, placeholders[0]);
    element = anchorText.replace('#', '');
  }
}

Hier wird die Funktion copyToClipboard aufgerufen. Die sieht so aus:

async function copyToClipboard(anchorText, highlightDiv) {
  const codeToCopy = window.location.origin + window.location.pathname + anchorText;
  try {
    var result = await navigator.permissions.query({ name: "clipboard-write" });
    if (result.state == "granted" || result.state == "prompt") {
      await navigator.clipboard.writeText(codeToCopy);
    } else {
      copyCodeBlockExecCommand(codeToCopy, highlightDiv);
    }
  } catch (_) {
    copyCodeBlockExecCommand(codeToCopy, highlightDiv);
  } finally {
  }
}

Dieses Snippet nutzt das navigator-Objekt um zu erfragen, ob Copying in die Zwischenablage überhaupt erlaubt ist. Falls ja wird versucht, den Link im Clipboard abzulegen. Wenn das schiefgeht, wird als Fallback die alte Variante des Kopierens versucht. Hierfür verzweigt der Code in die Funktion copyCodeBlockExecCommand. Dieses Snippet sieht so aus:

function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
  const textArea = document.createElement("textArea");
  textArea.contentEditable = "true";
  textArea.readOnly = "false";
  textArea.className = "copyable-text-area";
  textArea.value = codeToCopy;
  highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
  textArea.select();
  textArea.setSelectionRange(0, 99999); // For mobile devices
  document.execCommand("copy");
  highlightDiv.removeChild(textArea);
}

Hier wird ein textArea-Objekt erzeugt und der Inhalt des Links zuerst dort hinein geschrieben, dann der Inhalt selektiert und in die Zwischenablage kopiert.

Outro #

Mit diesen Snippets solltet ihr es schaffen, einen klickbaren Anchor-Link hinter euren Überschriften anzuzeigen. Headlines kann man dann klicken. Damit sie kicken, seid ihr dann selbst verantwortlich.