HUGO

Adding a link icon to headings

I have generated a site with gohugo and ananke. If I include a heading, then hugo automatically creates an internal anchor for it: e.g.

<h1 id="foobar">foobar</h1>

But I would like a link icon to be displayed next to the heading, so that someone can click on this to extract the URL which links directly to this heading - such as the blue link icon here

image

That’s from Hugo’s own documentation site. But is that a standard Hugo feature that they’ve turned on? Or is it something magic in the custom theme from that site - and if so, how would I make my ananke site do the same thing?

An example of an internal link from my actual site is here

Thanks!

Currently on gohugo.io these links are injected dynamically on the client-side with Javascript. This is something I can’t advise personally.

But apart from replacing all your titles with a shortcode, I don’t see a better solution at the moment :slight_smile:

I don’t know JS, so I just add the links physically in the template. Using regex to parse and doctor HTML is not advisable, but it works great in this case:


That same thread has the JS-based solutions too.

This seems to be more a CSS issue. Try something like this (hope you know enough about CSS):

a[href$=".pdf"]::after {
	content: 'PDF-File';
	font-size: 75%;
	color: green;
	margin-left: 1rem;
}

In this example CSS looks whether it’s a PDF file and writes ‘PDF-File’ behind the link. Same applies to SVG or Graphics. Also you can think about Font Awesome. And you can ask @budparr who’s the developer of Ananke.

Hope this helps.

It is not, because the issue is adding a link with the right href, not displaying something that holds it. However what @kaushalmodi suggested is really clever.

{{ .Content | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${1}&nbsp;<a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | safeHTML }}

Although it may not fit what you exactly the result you wanted to achieve, it shows how you can achieve it with a nice regex :slight_smile:

If you are happy with some JS, this has been answered just now in this thread:

Thanks everyone.

I found in the main hugo repository a partial called docs/themes/gohugoioTheme/layouts/partials/icon-link.html - but I couldn’t find it referenced from anywhere significant:

$ grep -lR icon-link .
./.git/index
./docs/static/css/hugofont.css
./examples/blog/static/css/bootstrap.min.css

If the magic is actually done from Javascript, that would explain why.

Ah yes, I think I found it now: docs/themes/gohugoioTheme/src/js/anchorforid.js, imported from docs/themes/gohugoioTheme/src/js/main.js

Thanks again,

Brian.