How to use TableofContents in theme

[cuttalfish]

@vjeantet,

I love your theme! I just can't figure out how to use the .TableOfContents feature within your theme to create navigation from anchors in a markdown file. Can this currently be done with this theme?

Thanks!

[splashx]

@cuttalfish use {{% toc /%}} on the page.

[cuttalfish]

@splashx that works for putting the TOC into the markdown rendered page, but does not build the navigation from the anchors on the page in the navigation to the left. Do you know if that functionality is possible with this theme?

[splashx]

For that you need to create folders/headers. Take a read on this: https://docdock.netlify.com/content-organisation/ Here is the source code of the page above: https://github.com/vjeantet/hugo-theme-docdock/tree/master/exampleSite/content/content-organisation

[zeigerpuppy]

you can put toc=true in the header, eg:

+++
title = "Management of Whale Friendship"
toc = true
tags = ["delirium", "size differences"]
+++

[Pilskalns]

This looks like solved. Thanks for pointing to the right docs pages.

[karlredman]

Just a quick note for others who might be looking for a hugo-centric answer for this question: As of v1.1, flex is the default theme type in this project. So, here's how to add TOC to v1.1 flex theme type -note this will break reactive-ness but this will get you started (hope this is helpful):

• add toc: true to your document front matter
• add following line to <project>/laytouts/partials/custom-head.html

<link href="{{"css/custom.css" | relURL}}" rel="stylesheet">

• add following text to <project>/layouts/partials/cusotm-footer.html

{{ if and (gt .WordCount 400 ) (.Params.toc) }}
<section>
    {{.TableOfContents}}
</section>
{{ end }}
<script src="{{"js/custom.js" | relURL}}"></script>

• add the following text to <project>/static/js/custom.js

if ($('#TableOfContents').length > 0) {
    document.getElementsByClassName("page")[0].style.margin = '0 16rem 0 17rem'
    document.getElementsByClassName("page")[0].style.padding = '0 1rem 0 4rem'
}

• add the following text to <project>/static/css/custom.css

#TableOfContents:before {
    content: "Table Of Contents:";
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 0 0
}

#TableOfContents {
    background-color: #f6f6f6;
    border-radius: .2rem 0 0 .2rem;
    box-sizing: border-box;
    /* max-height: calc(100% - 10.5rem); */
    max-height: calc(100% - 7.5rem);
    overflow: auto;
    padding: 1rem;
    position: fixed;
    right: 0;
    top: 4rem;
    /* top: 0; */
    width: 16rem
}

#TableOfContents>h1 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 1rem
}

#TableOfContents>ul {
    list-style-type: square;
    padding: 0 1rem
}

[edited]: fixed file extensions listed

[Pilskalns]

I don't use flex style for my deployments, but ToC should be pretty native for it as well without custom modifications.

Also, would be cool to avoid adding javascript just for this.

I guess it all needs to be tested and maybe revised, so reopening for now.

[karlredman]

agreed on the js aspect for sure. I've only just started using hugo/this-theme/golang/scss/etc. I think some fiddling with the scss and adding a hook in before/after-content or something might do the trick.

the main reason for the cheezy js was only to detect that toc was present and to adjust the css (poorly) accordingly.

I see that layouts/partials/original/body-beforecontent.html has a hook already. I'd propose something like the following in both themes to provide the ability to a) force site toc if desired, b) allow page toc. Also, this is a rabbit hole, I'm not sure how much control a person really wants or what the theme want's to allow...

Anyway, once we have a class and/or id we can hide/display as needed via css and do our own placement, blah, blah.

here's basically what I think most people would be looking for:

    <!-- TOC -->
    {{ if and (.Site.Params.force_toc) (gt .Wordcount .Site.Params.toc_wordcount) }}
      <section id="toc" class="toc">
        {{ .TableOfContents }}
      </section>
    {{else}}
    {{ if and (.Params.toc) (gt .Wordcount .Params.toc_wordcount) }}
        <section id="toc" class="toc">
          {{ .TableOfContents }}
        </section>
      {{end}}
    {{end}}
    <!-- /TOC -->

Sorry about the duplicate code. I'm sure there's probably a more elegant way to express this.

[linuxmail]

hi,

I use the code above too, to have a TOC on the right. For me it looks O.K, except that visiting the page with a mobile phone is broken, as @karlredman said.

Is there a solution for that ?

[maridob]

I know this conversation was back in 2019. I am a newbie in Hugo, but when I looked at the latest version of this theme, it seems like it is TOC enabled, but I cannot get table-of-contents working.

Do I have to enable this in frontmatter or params to work? I tried both, but they both failed. Anyone?

Is there another set-up I need to do?

Based on the example, I will need to add below in the header: disableToc: false

~but the above did not work~

UPDATE: After poking around through the code, it is working. The table of contents is embedded in the drawer (id: toc-menu).

It is by default "on" unless the page is a chapter.

What we need is to display the TOC more visibly. I added a code inside the id "body-inner" of body-beforecontent.html

{{$toc := (and (not .Params.disableToc) (not .Params.chapter))}}
 <div id="body-inner">
  <br></br>
  {{if not .IsHome}}
    <h1>{{.Title}}</h1>
    {{ if $toc }}
    <div class="wrapper">
      {{ .TableOfContents }}
    </div>
    {{ end }}
  {{end}} 

Being a HUGO newbie, I am unsure if this is the best path, but it works.