TOC doesn't retrieve headings from template sections

Hi!

I have been working on adding TOC into an existing page template. After adding it, I saw that TOC doesn’t retrieve headings outside of its container. Note, all content for each section is defined in page’s front matter.

I’ve looked for solutions regarding TOC’s scope etc, but couldn’t find anything that fits me.
I am new to Hugo, however, I would like to find a proper way for this issue, any guidance is appreciated!

See part of the template below:

{{ define "main" }}

<div class="container row"> 
<div class="col-lg-3 mb-5 mb-lg-0">
    <div class="bg-white shadow rounded-lg p-4 sticky-top" style="top: 30px;">
      <h4 class="has-line-end">{{.Title}}</h4>
      {{ .TableOfContents }}
    </div>
</div>
<div class="col-lg-9">
  {{with .Params.intro_block_}}
  <section class="section">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <div class="col-lg-6">
          <div class="section-title">
            <h2 class="h1 mb-4">{{ .title | markdownify}}</h2>
            <div class="content pe-0 pe-lg-5">{{.content | markdownify}}</div>
          </div>      
        </div>
        <div class="col-lg-6 mt-5 mt-lg-0 justify-center">
          {{ if .image }}
          {{ if fileExists (add `assets/` .image) }}
          {{$img:= resources.Get (.image) }}
          {{$img:= $img.Resize "1280x webp"}}
          <img loading="lazy" decoding="async" src="{{$img.RelPermalink}}" alt="{{.title}}" class="rounded w-100" width="{{$img.Width}}" height="{{$img.Height}}">
          {{ end }}
          {{ end }}
        </div>
      </div>
    </div>
  </section>
  {{end}}

  {{ with .Params.block_1_}}
  <section class="section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-12">
          <div class="section-title">
            <h2 class="h1 mb-4">{{ .title | markdownify}}</h2>
            <div class="content pe-0 pe-lg-5">{{.content | markdownify}}</div>
          </div>    
        </div>
      </div>
    </div>
  </section>
  {{end}}

How it looks in browser:

The .TableOfContents is derived from the rendered markdown (defined below the front matter) in your content file, and you cannot broaden its scope.

See https://discourse.gohugo.io/t/how-to-add-to-content-before-rendering/39781/4.

You might have a look at https://tscanlin.github.io/tocbot/ or similar.

Thank you @jmooring !

So, do I understand correctly that I need to create an appropriate shortcode for TOC and then add to template?
Won’t it cause that my current TOCs on other pages will look different and I’ll have to create CSS properties for that new TOC?

Sorry, if my questions are dumb :slight_smile:

No.

If you want to display a table of contents that includes elements outside of your page’s .Content, you will need to use JS. That’s why I pointed you to tocbot.

@jmooring thanks again!
I’ve tried to work with tocbot but couldn’t make it work. If i get more time, I will take a look at it again.
I was thinking, perhaps, there is a workaround for that? For example, use single.html with regular TOC that looks at .Content and renders headers as expected. However, it brings another question - how do I position image like in the screenshot in my original post? Shortcode for image processing that I have doesn’t allow that.

Thanks!

This topic is about table of contents. Please create a new topic .

This is a simple example of using tocbot to dynamically build a table of contents:

git clone --single-branch -b hugo-forum-topic-39819 https://github.com/jmooring/hugo-testing hugo-forum-topic-39819
cd hugo-forum-topic-39819
hugo server

Then visit http://localhost:1313/post/test/.

Files of interest:

There are other JS solutions for creating a toc dynamically. Tocbot was just the first one that I tried.