Support TableOfContents

[Marc Riera]

Hi!

Could you add support for TableOfContents in posts?

Thank you! 😄

[siegerts]

Hi @mrcasals!

The .TableOfContents built-in can be used right in your *.md files with a quick shortcode in your project directory.

<!-- layouts/shortcodes/toc.html -->
{{ replace .Page.TableOfContents `href="#` (printf `href="%s#` .Page.Permalink) | safeHTML }}

Then reference in your files with {{< toc >}}. The above outputs HTML in the form of <nav id="TableOfContents">. This can be styled with a custom css file.

Something like below should get it to a good starting point within the context of the theme:

nav#TableOfContents {
  width: 90%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

nav#TableOfContents ul {
  line-height: 1.5;
  list-style-type: none;
  text-decoration: none;
  padding-left: 0.5rem;
}

nav#TableOfContents ul a {
  /* link color */
  color: #000;
  text-decoration: none;
  transition: color 0.15s ease-in;
}

nav#TableOfContents ul a:hover,
nav#TableOfContents ul a:focus {
  text-decoration: underline;
}

I'd rather not make too many structural changes to the default layouts. This way, it's a bit more flexible and you can place and style the generated table any way that you'd like.

[Marc Riera]

Hi!

I'm just trying with Hugo and tried the shortcut solution, but couldn't get it working. I tried adding {{ .TableOfContents }} to this theme's layouts/post/single.html and got it working, that's why I asked.

Thanks for the suggestion, I'll try it your way! 😄