{
  "$type": "site.standard.document",
  "description": "feat: add automatic Table of Contents for Hugo posts",
  "path": "/posts/table-of-contents-for-hugo/",
  "publishedAt": "2024-06-28T00:00:00.000Z",
  "site": "https://read.ryancowl.es",
  "tags": [
    "Code"
  ],
  "textContent": "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.\n\n  \n\nCreate the layout file\nFirst, create a new file for the Table of Contents structure in the root (not your theme's)  directory[^1].\n\nIn that file, add the markup and call :\n\nYou can change the HTML markup to suit your needs and then style it with CSS as much or as little as you'd like.\n\n  \n\nConfigure the settings\n\nNow 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:\n\nOr if you're using JSON:\n: 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.\n: 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.\n: If true the TOC will be generated as an ordered list (). If false, it will be generated as an unordered list ().\nUse it in your posts\n\nNow 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.\n\n[^1]: You can use whichever editor you prefer. Replace  with , , or whatever you have installed.",
  "title": "Create a Table of Contents for Hugo"
}