Looking for Custom TOC

support
1

I am using gohugotheme and would like to add a Custom TOC on the right sidebar which is easy for navigation. Please refer me a good one which is available.

2

Here’s the toc I use for my site.

Note: It only uses <h2> elements, so if you want all heading levels, it’ll need to be made smarter.

3

Thanks @zwbetz
i have more than 30 headings and i am looking for something which has dynamic scrolling features.

4

Tocbot Lots of options. I just added it to my site and it is easy to set up. You can style the toc with your own css if you like.

2 Likes
5

looks neat, thanks for sharing

6

Here’s how I set up Tocbot:

  1. Download from https://tscanlin.github.io/tocbot/

  2. Copy styles.css, tocbot.css, and tocbot.min.js from the dist folder to your static folder.

  3. Between <head></head> tags and after your css link add:

<link rel="stylesheet" href="/tocbot.css">
<link rel="stylesheet" href="/styles.css"> <!-- tocbot -->

  1. Add class=“js-toc” where you would like to have the toc. I put mine in single.html:

<!-- placeholder for tocbot toc -->
<div class="js-toc"></div>

  1. Add class=“js-toc-content” where you want Tocbot to look for headers. I did mine like this in single.html:

<div class="js-toc-content">
{{ .Content }}
</div>

  1. Somewhere after content and before the ending body tag, add the call to the script and set at least these three tocbot options as shown below. This snippet can go in baseof.html if you like. I added mine to single.html as I don’t need it on every page. It’s at the bottom of single.html right before {{ end }} (which is the end of {{ main }}).

<script src="/tocbot.min.js"></script>

<!-- tocbot options -->
<script type="text/javascript">
tocbot.init({
// Where to render the table of contents.
tocSelector: '.js-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.js-toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h2, h3, h4, h5',
});
</script>

Add more Tocbot Options as needed.

1 Like
7

Thanks @marcia

1 Like
8

Unless you are specifically looking to read of the heading structure of the generated html, it is now possbie to use the new .Fragments page variable to customise the templating of your Table of Contents.

Requires version of Hugo > 0.111.0

<nav>
  {{- range .Fragments.Headings }}
  <ul>
    {{- range .Headings }}
    <li><a href="#{{ anchorize .ID }}">{{ .Title }}</a></li>
    {{- if .Headings }}
    <ul>
      {{- range .Headings }}
      <li><a href="#{{ anchorize .ID }}">{{ .Title }}</a></li>
      {{- end }}
    </ul>
    {{- end }}
    {{- end }}
  </ul>
  {{- end }}
</nav>
2 Likes