Hugo themes with dynamic TOC highlighting

support
3

@huyingjie wrote:

@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:

Initial preparation

  1. Run git clone --recurse-submodules https://github.com/sourcethemes/academic-www.git to get the Academic documentation website (this has the TOC sidebar in docs/)
  2. Run git clone --recurse-submodules https://github.com/sourcethemes/academic-kickstart.git to get the Academic kickstart (plain vanilla but fully configured Academic theme).
  3. Run cd academic-kickstart,
  4. Run hugo new post test-post.md
  5. Edit content/post/test-post.md in your favorite editor.
  6. Run 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:

  1. mkdir layouts
  2. cp -avi ../academic-www/layouts/docs layouts/post (for the single.html template)
  3. cp -avi ../academic-www/layouts/partials/ layouts/
  4. cp -avi ../academic-www/static/css/ static/ which copies static/css/custom.css for the TOC highlighting magic
  5. Edit config.toml, search for custom_css = [] and change it to custom_css = ["custom.css"]

And that should do the trick!

1 Like
Dynamic TOC highlighting