Is there any way I can set how deep the level is to show the TOC at right side? about hugo-book HOT 9 CLOSED

Hi!
In hugo version 0.60 they changed renderer for hugo, so now BookToC is a flag true|false
And levels are controlled by hugo

markup:
  tableOfContents:
    endLevel: 3
    ordered: false
    startLevel: 2

https://gohugo.io/getting-started/configuration-markup/#table-of-contents

from hugo-book.

OK, I found some documentation on Hugo official website: https://gohugo.io/content-management/toc/ which says:

Currently, the {{.TableOfContents}} page variable does not allow you to specify which heading levels you want the TOC to render. See the related GitHub discussion (#1778). As such, the resulting <nav id="TableOfContents"><ul></ul></nav> is going to start at <h1> when pulling from {{.Content}}.

So any suggestions or work-around?

from hugo-book.

OK I found the work-around.

{{/* https://github.com/gohugoio/hugo/issues/1778 */}}

{{/* ignore empty links with + */}}
{{- $headers := findRE "<h[2-3].*?>(.|\n])+?</h[2-3]>" .Content -}}
{{ .Scratch.Set "last_level" 1 }}

{{/* at least one header to link to */}}
{{- $has_headers := ge (len $headers) 1 -}}
{{- if $has_headers -}}

{{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
  {{ if and ($showToC) (.Page.TableOfContents) }}
  <aside class="book-toc fixed">
    <!-- {{ .Page.TableOfContents }} -->
    <nav id="TableOfContents">
      <summary>
      <b>Table of Contents</b>
      </summary>
      {{- range $headers -}}
          {{- $last_level := $.Scratch.Get "last_level" -}}
          {{- $header := . -}}
          {{- $base := ($.Page.File.LogicalName) -}}
          {{- $anchorId := ($header | plainify | htmlUnescape | anchorize) -}}
          {{- $href := delimit (slice $base $anchorId) "#" | string -}}
          {{- range findRE "[2-4]" . 1 -}}
              {{- $next_level := (int .) -}}
              {{- if gt $next_level $last_level -}}
                  {{- range seq (add $last_level 1) $next_level}}
                      <ul class="toc-h{{ . }}">
                  {{- end -}}
              {{- else if lt $next_level $last_level -}}
                  {{- range seq (add $next_level 1) $last_level}}
                      </ul>
                  {{- end -}}
              {{- end -}}
              <li><a href="{{ relref $.Page $href }}">{{- $header | plainify | htmlUnescape -}}</a></li>
              {{ $.Scratch.Set "last_level" $next_level }}
          {{- end -}}
      {{- end -}}
      </nav>
  </aside>
{{ end }}
{{- end -}}

This can limit side toc level to h2 and h3, you can adjust it when you want to set different depth of your toc.

from hugo-book.

Next problem need to solve is to config how deep the level you want to show the toc in specific post.

from hugo-book.

Hi!
Yeah, since ToC is provided by markdown library it's hard to tweak,
Have you considered to hide lower level toc with css? in assets/_custom.scss something like

nav#TableOfContents ul ul ul ul {
  display: none;
}

This will leave only top 3 levels visible. Not best solution, but something simpler.

from hugo-book.

oh, yes.

This is a simpler solution. But it's harder to make it configurable for individual post which has different level to show because of the hard coded css.

from hugo-book.

I think it should be fairly easy to make per page.

1. Override inject/head.html
2. If page variable bookToCLevels: x is set: generate <style>...</style> with CSS to hide levels

Not sure that I want to add it to theme, I try to keep KISS approach.

from hugo-book.

HI again!
I added feature which allows to limit amount of levels showed for ToC with CSS

Set this In site config or page frontmatter to render only h1, h2 and h3

BookToC: 3

from hugo-book.

I set BookToC: 4 in page, but not work

from hugo-book.