Adding a link icon to headings

support
1

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!

2

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:

3

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.

4

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.

5

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:

6

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

7

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.