Add table of contents to hyde-hyde theme in Hugo

Question

I'm using the hyde-hyde theme for my website with Hugo (https://github.com/htr3n/hyde-hyde), and I can't figure out a way to add a table fo contents to my posts, especially the long ones. Is there a simple way to do it with this theme ?

Thanks.

Answer 1

I am new to gohugo, so I can't provide precise support. But it seems like gohugo comes with a built-in system for adding tables of contents to posts. Here's the gohugo documentation for the feature: https://gohugo.io/content-management/toc/

I am not sure where and how the TOC would appear in a post published with the Hyde-Hyde theme. The author of the theme might have some insight there.

Answer 2

UPDATED 2018-09-30:

I misread the original question about TOC and instead gave an answer on tables in Markdown.

Regarding Table of Contents, there are essentially two approaches:

a) Using Hugo support for TOC and add some CSS rules to style the TOC as you wish

b) Using external libraries such as Tocbot that can scan the HTML content and extract the headings to create the TOC. Tocbot is very powerful and configurable.

In particular in hyde-hyde, you can do the following the achieve a TOC:

a) Add {{ .TableOfContents }} to layouts/partials/page-single/content.html, for instance

{{ if .Site.Params.toc }}
    {{ .TableOfContents }}
{{ end }}

b) Style the original Hugo generated TOC with the root element nav#TableOfContents, for example

#TableOfContents > ul {
  list-style-type: none;
  padding-left: 0;
}
#TableOfContents > ul > li ul {
  list-style-type: none;
  padding-left: 1em;
}

You can investigate further the example code here where I developed a collapsible TOC.

---

I'm the author of hyde-hyde, so hopefully I can weigh in some suggestions.

hyde-hyde is a just theme used by gohugo to generate static Web pages (HTML/CSS/JS) from Markdown (MD) contents. So what you need is to add tables in your Markdown files.

Note that tables are not specified in original Markdown but supported in many variants like MultiMarkdown (MMD) or Github Flavored Markdown (GFM).

Another potential approach is using inline HTML supported by Markdown to add <table>...</table> as you wish. This works better in case you need complex tables (e.g. with rowspan or colspan), as you can see here.

The aforementioned methods can be used with other Hugo themes as well. Either way, Hugo can handle tables well.