Hugo TableOfContent menu for HTML pages

Is there a way to use Hugo’s TableOfContent menu on HTML pages? If so, how?

I’m not using markdown but HTML.

No, there is not. Have a look at tocbot.js.

Okay, thank you

Also not if you add in the frontmatter of a page?



  • example-1
  • example-2

I tried this and it showed up.

But it doesn’t show the title of the h2 tag.

It only shows example-1 and example-2 as titles of the tags.

{{ with .Params.toc }}{{ range . }}<p><a href="{{ . }}">{{ . }}</a></p>{{ end }}{{ end }}

Apparently your theme has implemented a non-standard way to generate table of contents entries based on front matter.

Please raise your question with the theme author.

I’m not using any theme. I create my own themes. And I did not add any TOC configuration to my themes. I’m now using TOC menus that I add in each page with HTML.


<div id="toc">
<li><a href="#example-1">Example 1</a></li>
<li><a href="#example-2">Example 2</a></li>

Not to put too sharp an edge on this but, if you wrote the code, why are you asking us?

Because I’m looking for a easier way to implement a TOC menu. Now I need to add the TOC menu on every page. And if I want to change something, I need to edit the TOC menu on all pages.

And because my pages are HTML and not markdown. So, there’s no standard way of using Hugo’s TOC menu feature. So maybe someone has a solution for HTML pages.

It’s fine if I need to add a few lines to the frontmatter of a page, like for example:

- example-1
- example-2

I’m thinking of creating a shortcode that I add to the pages that have a TOC menu (not all pages need a TOC menu).

EX. (single.html):

{{- if .Params.toc }}
{{ partial "toc.html" . }}
{{- end }}

That’s why I suggested in my initial response that you have a look at tocbot.js.

Here’s a very simple example:

git clone --single-branch -b hugo-forum-topic-39819 hugo-forum-topic-39819
cd hugo-forum-topic-39819
hugo server

Okay, thanks for the tip.