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: