Son Of Sun Tzu blog

Son Of Sun Tzu blog

They keep saying my audience will find me…

24 Jul 2023

How to implement a Table of Contents in the Hugo Vitae theme

This is the “Table of Contents” for this post, something I haven’t been able to do before:

I noticed a Table of Contents appearing by default on my test blog, and as my so-called weeknotes tend to get pretty long, having a ToC working on this live blog would be useful.

To implement this on your own Hugo blog you probably want to do the following:

  1. Go to Julie Codestack‚Äôs blog, which is what I used, and read that through. You might be able to just enable the functionality, but if that doesn’t work, do read on.

  2. Check the Hugo website here on how to configure a Table of Contents in your configuration file, which is probably config.toml.

  3. Grab the “toc.html” file from Parsiya’s github repository and put it into the right directory. Do read the file for instructions.

  4. Use “{{< toc >}}” in your markdown whereever you want the Table of Contents to appear.

If you want a more comprehensive blog explaining all of this, this post by Igor Baiborodine looks useful. But this limited functionality suits me for this multi-functional blog. It’s arguably not as nice as the list of Contents that’s off to the side, as shown on my test blog, but it should work on all screen sizes.

The rest of this document is just some Lorem Ipsum stuff, so you can see how this works.

this is the first level 1 heading

I expect to be playing with different aspects of Hugo “Front Matter” finally, so this is just a post for me to modify at a future date.

this is the second level 1 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

this is the first level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed enim ut sem viverra aliquet eget. Semper eget duis at tellus at urna condimentum. Sed faucibus turpis in eu mi bibendum neque egestas congue. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. In metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Vitae ultricies leo integer malesuada nunc vel risus. Amet facilisis magna etiam tempor. Vel turpis nunc eget lorem dolor sed viverra ipsum. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Enim nec dui nunc mattis enim ut tellus. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Ut etiam sit amet nisl purus in. Integer eget aliquet nibh praesent tristique magna sit amet purus. Massa ultricies mi quis hendrerit dolor. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Sem viverra aliquet eget sit amet tellus cras adipiscing. Placerat vestibulum lectus mauris ultrices eros in.

this is level 3, indented slightly further

Libero nunc consequat interdum varius sit amet mattis. Nibh venenatis cras sed felis eget. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Massa eget egestas purus viverra accumsan in nisl nisi. Netus et malesuada fames ac turpis egestas. Vel pretium lectus quam id leo in. Justo nec ultrices dui sapien eget mi proin sed. Diam volutpat commodo sed egestas. Sed viverra ipsum nunc aliquet bibendum. Ultrices dui sapien eget mi proin sed. Dolor sed viverra ipsum nunc aliquet bibendum enim. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Enim diam vulputate ut pharetra sit amet. Aliquet bibendum enim facilisis gravida neque.

this is the second level 2

Hac habitasse platea dictumst quisque sagittis purus sit amet. Sed sed risus pretium quam. Facilisi cras fermentum odio eu feugiat pretium nibh. Sapien eget mi proin sed libero enim. Pulvinar pellentesque habitant morbi tristique. Sagittis nisl rhoncus mattis rhoncus. Vel quam elementum pulvinar etiam non quam lacus. Fusce id velit ut tortor pretium viverra. Fringilla urna porttitor rhoncus dolor purus. Leo vel orci porta non.

this is another level 3

Nulla posuere sollicitudin aliquam ultrices. In pellentesque massa placerat duis ultricies lacus. Lacus vel facilisis volutpat est velit. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Cras ornare arcu dui vivamus arcu. Enim nulla aliquet porttitor lacus. Ac feugiat sed lectus vestibulum.

and this is yet another level 3

This is the end of the page.