I would like to skip one few headers from the right toc in just one section of a page … how do I accomplish that ?
<h1></h1>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
--> .... too many .. so want to to skip here
<h1></h1>
<h2></h2>. --> ok here
razon
March 21, 2023, 1:24am
2
You could do that with Page Fragments , replace the {{ .TableOfContents }}
with following.
{{/* H1 */}}
<ul>
{{ range .Fragments.Headings }}
{{/* H2 */}}
{{ with index .Headings 0 }}
<li>
<a href="#{{ .ID }}">{{ .Title }}</a>
</li>
{{ end }}
{{ end }}
</ul>
2 Likes
A table of contents should not contain an h1.
Thanks @razon . I cant modify the templates as this is needed only for a single page. Any other tricks?
razon
March 28, 2023, 6:12am
5
Hmm, you could apply a CSS on your single page.
<div class="my-single-page">
TABLE OF CONTENT
</div>
.my-single-page #TableOfContents ul li:not(:first-child) {
display: none;
}
Rewrite your content so it doesn’t contain so many headers that are unwanted!
3 Likes
Yup, I’m considering moving the data into tables .
Thanks @razon . Let me try that.
Frankly , Hugo/Goldmark should provide attributes on header like
==header{skiptoc=1}
Question: Do the headings you wish to skip need to be heading elements, or do they need to look like heading elements?
1 Like
Actually, they need not be header elements, But the on-hover link seems to be done automatically for all headers. as of now, I added a shortcode to solve my issue. This seems to skip the toc, but are anchored. used as:
{{<header title="test1">}}
shortcode: header.html
{{ $sz := 3 }}
{{if (.Get "size") }}
{{ $psz := (int .Params.size)}}
{{if (and (ge $psz 1) (le $psz 6)) }}
{{ $sz = $psz}}
{{end}}
{{end}}
<h{{$sz}} id="{{ .Params.title | .Page.RenderString | anchorize}}">
{{.Params.title | .Page.RenderString}}
</h{{$sz}}>
If you use something like tocbot instead of Hugo’s built-in methods, you can do:
### Heading {.js-toc-ignore}
Otherwise, you could hijack the rarely used h6
element and use markdown attributes to apply the desired style:
###### Heading {.make-me-look-like-an-h2}
1 Like
To support your extremely unusual edge case? Just format your content correctly. Problem solved.
1 Like