How to Headline

Hugo and Headlines #

Hugo offers a so-called »render hook« for headlines. This means you can change the behavior of how headlines are rendered from Markdown files. To do this, create the file called render-heading.html under the path layouts/_default/_markup:

Render-Hook #

According to Hugos Documentation this file gets the following input variables from Hugo:

• .Level - The hierarchical level of the headline: So 1 for H1, 2 for H2 etc.
• .Text - This is the headline’s text
• .Anchor - The anchor link of the headline itself

Rendering the Headline #

This snippet is all you need to render a headline:

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

However, we don’t just want to write the headline text, we also want to automatically display a hashtag at the end of the headline. To do this, we expand the snippet like this:

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

We write a diamond symbol after the heading text. We also place a div with the lowlight class around the heading text. Not much has happened yet. We therefore add a link to the snippet:

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

So far. So good. The # symbol is now clickable. We gave the link element the class heading-anchor. The reason for this is so that we can easily select all anchor elements using Javascript.

Copy link #

Now we not only want it to be clickable, but also to be copied to the clipboard. That’s why we need the following Javascript here:

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

Here we use the Css class mentioned above to determine all anchor elements on a page and link their click event with the copyAnchorLink function. This function is given the previously read href attribute of the anchor element. We then have to program the function. It looks like this:

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

Here the function copyToClipboard is activated. It looks like this:

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 {
  }
}

This snippet uses the navigator object to ask whether copying to the clipboard is allowed at all. If so, an attempt is made to store the link in the clipboard. If this fails, the old version of copying is tried as a fallback. To do this, the code branches to the copyCodeBlockExecCommand function. This snippet looks like this:

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);
}

A textArea object is created here and the content of the link is first written into it, then the content is selected and copied to the clipboard.

Outro #

With these snippets you should be able to display a clickable anchor link behind your headlines. Your headlines can then be clicked. But you are still responsible for them to kick.