Hi:
I’m new to the forum, not so new to Hugo, but still a newbie.
I’m not a programmer, but I have started to code a new theme for an open source project, and I wish to have a table of contents where the hugo section currently being read is highlighted, so the reader knows where he/she is.
My problem: I wish to enclose each heading and all their contents between html <section>
tags, because I wish to use the intersection observer
to highlight the current hugo section.
I’ve searched and found this post:
I’ve already tried it and it works!.. Sadly not as I need it…
As it is, the code provided encloses h2 headings within divs, and by doing so, it ignores any h3, h4, … section, although they are included within the h2 div tags. So the toc correctly highlights h2 headings, but none of the lower level headings.
I’ve managed to make hugo surround any heading level between divs by editing the render-heading.html
into:
{{ if eq .Level 2 }}
{{ printf "<!-- end-chunk -->" | safeHTML }}
{{ printf "<!-- begin-chunk data-anchor=%q -->" .Anchor | safeHTML }}
{{ else if eq .Level 3 }}
{{ printf "<!-- end-chunk -->" | safeHTML }}
{{ printf "<!-- begin-chunk data-anchor=%q -->" .Anchor | safeHTML }}
{{ else if eq .Level 4 }}
{{ printf "<!-- end-chunk -->" | safeHTML }}
{{ printf "<!-- begin-chunk data-anchor=%q -->" .Anchor | safeHTML }}
{{ end }}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
though the result is that now each section ends where a new heading starts, no matter its level.
That is:
- I need:
<section>
h2
<section>
h3
</section>
</section>
- and my new code gives:
<section>
h2
</section>
<section>
h3
</section>
I have edited the template code into:
{{ range (findRE `(?s)<!-- begin-chunk.*?(?:<!-- end-chunk -->|$)` .Content) }}
{{ $anchor := replaceRE `(?s).+data-anchor="(.+?)".+` "$1" . }}
{{ $block := replaceRE `(?s)<!-- begin-chunk.+?-->(.+?)(?:<!-- end-chunk -->|$)` "$1" . }}
{{/* Remove leading and trailing newlines. */}}
{{ $block = trim $section "\n" }}
<section id="{{ $anchor }}">
{{ $block | safeHTML}}
</section>
{{ end }}
I just changed the html tag from div
to section
and the variable $section
to $block
to avoid confusion with the html tag.
Despite the code uses variables and regular expressions that I still don’t completely understand, I specifically have no idea where the begin-chunk
and end-chunk
come from. Moreover, I have no clue why the html comment codes are used at all.
I guess such code must need to be expanded with nested variables, functions or new regular expressions, but no matter how hard I’ve searched, I haven’t found any documentation, tutorial or example that helps me.
I’m not looking for someone to send me the correct code (that would be warmly welcomed, though). Instead, what I’m looking for are links or explanations to know how to code it myself. That way I will be able to find solutions to future problems for myself.
Would anybody be kind to lead me in the right direction, please?
Thanks