Create a Table of Contents for Hugo
~/.bnux
June 28, 2024
I am using the Paper theme, which doesn't include a Table of Contents. It turns out that Hugo can automatically parse Markdown content to create a Table of Contents so the heavy lifting is already done. I just needed to make a couple small additions to create a shortcode that would allow me to display a TOC. If you'd like to do the same, you can try following these steps.
Create the layout file
First, create a new file for the Table of Contents structure in the root (not your theme's) directory[^1].
In that file, add the markup and call :
You can change the HTML markup to suit your needs and then style it with CSS as much or as little as you'd like.
Configure the settings
Now you can adjust the settings in your Hugo configuration. There are a few parameters you can use to customize the Table of Contents. If you use TOML for your Hugo config, you can add:
Or if you're using JSON:
: This is the top heading level that will be included in the TOC. For example, if you set it to , then tags will be top-level in the TOC.
: This is the lowest level of heading that will be included. For example, if you set it to then tags will be included but tags and lower will not.
: If true the TOC will be generated as an ordered list (). If false, it will be generated as an unordered list ().
Use it in your posts
Now you're ready to use the Table of Contents anywhere in your Hugo content. You can insert the shortcode wherever you'd like and the in-page navigation will be automatically created when the site builds.
[^1]: You can use whichever editor you prefer. Replace with , , or whatever you have installed.
Discussion in the ATmosphere