How to skip a header in TOC

support
1

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
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
3

A table of contents should not contain an h1.

4

Thanks @razon . I cant modify the templates as this is needed only for a single page. Any other tricks?

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;
}
6

Rewrite your content so it doesn’t contain so many headers that are unwanted!

3 Likes
7

Yup, I’m considering moving the data into tables .

8

Thanks @razon. Let me try that.

Frankly , Hugo/Goldmark should provide attributes on header like

==header{skiptoc=1}

9

Question: Do the headings you wish to skip need to be heading elements, or do they need to look like heading elements?

1 Like
10

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}}>
11

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
12

To support your extremely unusual edge case? Just format your content correctly. Problem solved.

1 Like
13

Awesome !! Thanks @jmooring / @nternetinspired