Doc navigation with table of contents subnav

support
1

Is it possible to have the table of contents integrated with the page listings? For example, I have a left side navigation with 5 pages, when you click a page I’d like to show the TOC of that specific page. I don’t need help with the HTML but the logic of setting this up in Hugo.

Also, is it possible to customize the output of the TOC code?

2

Can you clarify what you mean?

Rendering a .Page's toc is as simple as calling {{ .TableOfContents }} for the page.

It would be easier to help by following the Requesting Help guidelines and adding a link to your site repo.

Doc: Table of Contents | Hugo

3

I am aware of calling the table of contents. Lets say I have the following:

/docs/1.md
/docs/2.md
/docs/3.md
/docs/4.md
/docs/5.md

I was hoping to create a left navigation that had links to 1-5, when I clicked on a specific link, that went to the specific page and expanded the menu showing the TOC of that page. So if I started on page 1, I’d see the TOC expanded under the 1 link, when I clicked to page 2, that would expand and show the TOC of that page.

4

Similar to Hugo docs, but while Templates is expanded it would have the TOC of that page.

image
image756×574 26.4 KB

5

Like I said, easier to help you with a site repo we can see. For example, I don’t know how you are rendering your navigation. Is this configured by Hugo Menus? Are you just listing out all the pages under docs?

If the second option, then you would do something like this:


{{ range where site.RegularPages "Section" "docs" }}

  {{ .Permalink }}
  {{ .TableOfContents }}

{{ end }}

Of course, adding the relevant HTML/CSS/JS is up to you.

6

@pointyfar That is what I ended up doing, I was overthinking it. Thanks for your help.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.