External Publication
Visit Post

Create a Table of Contents for Hugo

~/.bnux June 28, 2024
Source
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

Loading comments...