Best Practice Adding Link to Heading

support
3

This is what I have in my single.html:

    {{- with .Content -}}
    <div itemid="articleBody">
      {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
    </div>
    {{- end -}}

That adds an anchor to every heading. It is hidden by default, I use the following CSS to make it visible when you mouse over the heading (I only use heading 1-4):

.hanchor { font-size: 100%; visibility: hidden; color:silver;}
h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}

I think someone in this forum put me onto that, I originally used JavaScript but this is much better.

4 Likes