TOC Support?

[venteto]

This is a great theme, would you consider adding table of contents support, whether it's a responsive version or even just always at the top of the page? Thanks for your consideration!

Incidentally, I'm also borrowing this third party readfile shortcode and was hoping my headings in the component markdown files (separate page sections) of long articles would work with a TOC.

[jpanther]

Thanks for the suggestion @tronorama. Tables of contents is something that is on the roadmap. Unfortunately the way Hugo does TOC is really inflexible and difficult to style using Tailwind. It's looking like I'll need to build a custom shortcode that does all the TOC generation and it's not something I've had the time to work on. I've been looking around at other Hugo themes and there's a lot of crazy workarounds people have had to do to get this working and it's a pity the built in support isn't very useful.

That said, if you want to add basic TOC support now, you can add the {{ .TableOfContents }} partial to your article template and it will generate a TOC, but it's not ideal if you need nested headings and things.

[rshmhrj]

The way I just implemented it was similar:

updated layouts/_default/single.html

    ...
    </header>
    <section>
      {{ if .Params.toc }}
        {{ partial "toc.html" . }}
      {{ end }}
    </section>
    <section class="prose dark:prose-light">
    ...

layouts/partials/toc.html

{{ if (.Params.toc) }}
<aside>
    <header>
    <h2 style="color: var(--color-secondary-400); font-weight: bold;">Overview</h2>
    </header>
    <div style="padding-left: 1rem;">
        {{.TableOfContents}}
    </div>
</aside>
<br />
{{ end }}

and in each .md file that I want it to display, add the toc: true param.

---
title: "Dgraph"
date: 2021-12-27T22:43:44-08:00
draft: false
description: "Useful dgraph references"
slug: "dgraph"
tags: ["dgraph", "golang", "graph db", "database", "db", "nosql" ]
toc: true
---

@jpanther, if you think this is useful to include (minus my ugly h2 style hack), I can open a PR.

[jpanther]

Thanks, however I'm looking for a solution that allows each link within the TOC to be styled separately along with the ability to style nested links with different classes. The current .TableOfContents variable just dumps out a HTML list that is very difficult to style using Tailwind.

[venteto]

I do like the way the TOC is working in the current version, it's very nice FWIW