I would like to have a dynamics directory for my handbook on the right sidebar. I have found some themes where they have already been implemented. https://themes.gohugo.io/theme/material-docs/adding-content/
Unfortunately, I do not know how to install the dynamic table of contents. The documentation is not revealing. My question is: how do I implement such a table of contents?
Hi @Joerg,
About the two Hugo themes that have dynamic TOC highlighting functionality as I wrote in https://discourse.gohugo.io/t/hugo-themes-with-dynamic-toc-highlighting/10281:
- Academic uses Bootstrap v3.3.7 with Bootstrap’s scrollspy.js;
- Material Docs, which @digitalcraftsman adapted from https://github.com/squidfunk/mkdocs-material, appears to be written from the ground up, i.e. it is not using any existing framework like Bootstrap.
Note that with Bootstrap’s scrollspy.js, you will need a corresponding .css file to make it work. See https://github.com/anthonyfok/academic-kickstart-toc-example/blob/master/static/css/custom.css especially the lines containing data-toggle="toc"
.
Note: I am not a theme developer, and have little experience with actually implementing dynamic TOC highlighting.
From what you have told me in a private message, you have apparently implemented your own theme on your website from the ground up too. I am not sure if you want to pull in Bootstrap at all. Anyhow, here are some random links that I found which might be helpful to you:
-
Understanding Bootstrap’s Affix and ScrollSpy plugins — SitePoint
-
jquery - how to use scrollspy without using bootstrap - Stack Overflow
And, if @digitalcraftsman has time, he would be the better person to ask because he ported Material Docs theme and changed the scrollspy functionality afterall.
Cheers,
Anthony
I recently came across this JS library tocbot
… looks nice, and configurable.