How can I implement TOC like feature myself?


just started with hugo. read tutorials and wrote a small test project. very nice!

I found the TOC feature interesting and would like to understand how does it work and how can I write it myself. Lets say for just a second I want to implement something similar to TOC - lets say images. I would like to parse the markdown to all images and show a gallery of all images at the bottom of the page.

How would I implement such a thing? Thought maybe using shortcodes but does not seem suitable for this problem. please help.

There is a tutorial using shortcodes for building a gallery in hugo with photoswipe.js over here:

You could probably modify it to suit your needs

As for parsing only images in your Table of Contents, the only way I can think of fetching them separately from the rest of the content is by defining a “featured image” variable on the front matter of each post. See this post for more:

Hope that helps.