[SOLVED] Anchor image for headers

support
1

Hello all … For a single page, what I want to do is add anchor images to headers that link to the auto-generated ID tag like - for example - in the Hugo docs https://gohugo.io/content-management/cross-references/#hugo-heading-anchors .

I have read the Adding anchor next to headers thread, but I am at a loss about the most Markdown/Hugo-friendly way to proceed. Any help would be appreciated!

2

This post on Stack Overflow was helpful!

Hugo already auto-generates an ID tag on each heading. I create a Hugo shortcode - layouts/shortcodes/note-heading.html - that generates the header link decorated with the calendar icon from Feather Icons.

Then in my markdown document I use {{< note-heading “A note of interest ” >}} for headers.

3

Would you mind linking your repo and the resulting site? I think it would be useful for understanding, should anyone want to try this technique.

4

Sure! Here is the shortcode …

… and here is the page where I use it - https://www.circuidipity.com/notes/.

5

Thanks!