Automatic anchor links for paragraphs?

Earlier today I stumbled upon this page (the site is generated by Gatsby) and I envied the elegant way that anchor links are generated for each paragraph.

How would you go about doing something similar in Hugo?

Markdown Render Hooks support headings not paragraphs.

I have seen that there is a JS library for generating paragraph anchor links automatically.

But I am just wondering if people in this forum are aware of a better method for Hugo projects.

1 Like

Render hooks for headings? Isn’t that why renderhooks for headings got invented? The following is something I have laying around in my notes. Needs some CSS to be styled nicely though.

{{- $config := site.Data.dnb.renderhooks.heading -}}
{{ if eq $config.disabled false}}
  <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>
{{ else }}
  <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
{{ end }}

assuming you have a file in data/dnb/renderhooks/heading.toml with disabled: true in it. You could create the .Anchor by yourself with .Title | title (title doc) - but you need to be careful with identical headers. Maybe use a static counter for every single anchor.

Yes I know about render hooks for headings. I am asking about anchors for paragraphs <p> elements.

Oh. ok. Well, I don’t think it’s a good idea to do that with Hugo’s internal tools, because it will end up being done via RegExp on the parsed content which is resource hungry and will make “the fastest SSG” a “fast but ok SSG”. It’s also so much overkill of a feature (in my own opinion) that going the JS route is the way to go. Load the page, then parse the document structure into an array (or AST) and add the links on a certain level inside of a defined content section. I would even go so far as to enable this only on request so the page load is not too much impeded.

It makes probably sense to have something like that for scientific or religious texts, but those tend to be so long that an external JS solution sounds better to me.

1 Like

Have you tested the speed though? It’s a simple regex on opening <p> tags and a replacement with <p id="12"><a class="absolute" href="#12">something</a> the number being the “index” of the found regex.

I mean sure it will be slower than doing nothing, but I’d be curious to know how much build time you’d really concede.

1 Like

I am very “lazy” with testing concepts. But I have a “test content” repo in the works. As I said, I think it makes sense with longer texts, like secular and scientific texts that need deep-links… I am thinking about doing a test-content repo with Homer’s Illiad and once having that ready content wise I’ll play around with these things. Right now I have Aesops Fables which is more “many small content pieces”.

If it is useful, like for content that really requires to be linkable in-depth I would concede as much build time as needed (my own blog sometimes needs 10 minutes for some weird reasons), but people tend to add lots of features without any real use, so I see a certain danger of overkill. But that is an opinion. Mine :wink:

1 Like

I am developing an astrology blog for someone, so there you have it! :wink:

1 Like