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 di…

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: [image] Adding anchor next to headers support Being JS-illiterate, I just use this one-liner in Hugo partial smiley …

[image] candlerb: But I would like a link icon to be displayed next to the heading 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 exampl…

[image] Leo_Merkel: This seems to be more a CSS issue. 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…

If you are happy with some JS, this has been answered just now in this thread: [image] Adding anchor next to headers support Being JS-illiterate, I just use this one-liner in Hugo partial smiley Use it as: {{ partial "headline-hash.html" .Content }} Example

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…

Adding a link icon to headings

support

TotallyInformation April 15, 2018, 5:00pm 6

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

Topic		Replies	Views
ToC with anchors in posts support asciidoc	11	2468	July 22, 2019
Adding anchor next to headers support	24	14503	May 26, 2021
Theme: How do I add a link to the header next to each header? support	3	608	September 21, 2020
Put a header link before all h2 elements support	7	2829	April 12, 2019
Best Practice Adding Link to Heading support	5	3150	August 25, 2018

Adding a link icon to headings

Related topics