@huyingjie posted a question earlier:
I like table of contents in the sidebar, such as, http://yingjiehu.com/100-Days-Of-Web-Development-Round-1/ . When I scroll down, the table of contents changes. How can I achieve this in Hugo?
to which I replied:
On your current website generated with Hexo with the NexT theme, the Bootstrap Scrollspy plugin is being used. Look for the file
js/src/scrollspy.js on your website.
Also, see a demonstration of Bootstrap Scrollspy here:
It turns out that some of the Hugo themes have already implemented similar dynamic TOC highlighting, examples include:
- Academic, see https://sourcethemes.com/academic/docs/writing-markdown-latex/
- Material Docs, see https://themes.gohugo.io/theme/material-docs/adding-content/
- DocuAPI, see https://themes.gohugo.io/theme/docuapi/
Though of course, it is understandable that @huyingjie would like something more similar to the existing Hexo “NexT” theme.
It turns out there have been two efforts to port the NexT theme to Hugo:
@leopku’s version is rather outdated now.
@xtfly’s version has the same look-and-feel of the original Hexo NexT theme, though it has started to lag behind too. The main thing though is that dynamic TOC highlighting does not yet work, and is listed as a TODO on https://github.com/xtfly/hugo-theme-next.
NexT seems to be the most popular Hexo theme according to https://en.abnerchou.me/Blog/5c00ca67/, so perhaps it would be an interesting project to port this beautiful theme to Hugo with all the functionalities?
@anthonyfok Thank you. Academic theme does not have table of contents sidebar https://themes.gohugo.io/theme/academic/post/getting-started/
The default Academic theme doesn’t, but its documentation does! And it turns out it is easy to copy the table of content sidebar to your Hugo website when using the Academic theme:
git clone --recurse-submodules https://github.com/sourcethemes/academic-www.git to get the Academic documentation website (this has the TOC sidebar in docs/)
git clone --recurse-submodules https://github.com/sourcethemes/academic-kickstart.git to get the Academic kickstart (plain vanilla but fully configured Academic theme).
hugo new post test-post.md
content/post/test-post.md in your favorite editor.
hugo server and navigate to the post that you just created. Note that there is no TOC sidebar.
Now, do the magic
Staying inside the academic-kickstart directory:
cp -avi ../academic-www/layouts/docs layouts/post (for the
cp -avi ../academic-www/layouts/partials/ layouts/
cp -avi ../academic-www/static/css/ static/ which copies
static/css/custom.css for the TOC highlighting magic
config.toml, search for
custom_css =  and change it to
custom_css = ["custom.css"]
And that should do the trick!
For those who are too busy to follow the steps above, check out
which is based on https://github.com/sourcethemes/academic-kickstart
and https://github.com/sourcethemes/academic-www as described above.
Please be sure to add the
--recurse-submodules flag when you clone the repository, like so:
git clone --recurse-submodules \
so that the base Academic theme is fetched properly.
hugo server, you’ll find the example with dynamic TOC at http://localhost:1313/post/toc-test/