Setting up Table of Contents in Hugo blog posts

Featured image

Lately, I have been writing long posts and I thought wouldn’t it be nice to have Table of Contents section at the begining of each post, so that the navigation would be easier. So I set out to do it.

I did some research here and found out there are a couple of ways to do this.

  • Basic - Adding a TOC partial code snippet to the single.html file

Basic - Adding a TOC partial code snippet to the single.html file

All you have to do is, copy the single.html file from the directory themes/hugo-coder/layouts/posts/ to the directory layouts/posts/ and add {{ .TableOfContents }} just before {{ .Content }}. We are essentially creating a custom single.html file format to suite our needs. We are not chaning the actual file, but creating a file with additional content to override the default single.html file. Word of the caution, we need to remember to update this if you are updating the theme source, or comment it out if you are switching to a different theme.

References