Blog ToC Scrollspy Module

[giscus[bot]]

Blog ToC Scrollspy Module

Automatically update table of content navigation to indicate which heading is currently active in the viewport.

https://hbstack.dev/en/modules/blog/toc-scrollspy/

[TetraTheta]

How do I create ToC? Sorry to ask in irrelevant repository, but I couldn't find any related page from both hbstack and hugomods except here.

Of course, I've put # heading in my blog post like this (example):

# first heading

# second heading

# third heading

I expected the ToC would appear at the right side of blog post content, but it didn't.

Here is my current module import configuration (removed commented lines)

module:
  imports:
    - path: github.com/hbstack/syntax-highlighting/styles/xcode-dark
    - path: github.com/hugomods/icons/vendors/font-awesome
    - path: github.com/hbstack/blog/modules/giscus
    - path: github.com/hbstack/blog/modules/toc-scrollspy
    - path: github.com/hbstack/blog/modules/content-panel
    - path: github.com/hugomods/google-analytics
    - path: github.com/hugomods/google-adsense
    - path: github.com/hbstack/blog/modules/breadcrumb
    - path: github.com/hbstack/blog/modules/heading-sign
    - path: github.com/hbstack/blog/modules/post-nav
    - path: github.com/hbstack/blog/modules/related-posts
    - path: github.com/hbstack/meta/content
    - path: github.com/hbstack/meta/header
    - path: github.com/hbstack/meta/footer
    - path: github.com/hbstack/meta/seo
    - path: github.com/hbstack/syntax-highlighting
    - path: github.com/hbstack/back-to-top
    - path: github.com/hbstack/code-block-panel
    - path: github.com/hbstack/noscript
    - path: github.com/hbstack/progress-bar
    - path: github.com/hbstack/pwa
    - path: github.com/hbstack/scrollbar

github.com/hbstack/blog/modules/toc-scrollspy line have a comment saying blog table of contents scrollspy. Since that module won't make sense if there isn't ToC, I guess it also include ToC functionality.

How can I solve this issue?

[razonyang]

The default ToC heading level range is 2-3, you're using level 1, so it won't appear on the right side. You can either use level 2-3 for headings, or tweak the ToC levels.

[razonyang]

Btw, as I know, the Scrollspy component doesn't work with CJK languages, there is an open issue of this.

[TetraTheta]

Well, that's very unfortunate, because I use ToC for some of my blog post... Thank you for letting me know about it.

I think because of that issue, Hugo can't produce ToC at all even though I modified ToC levels.

markup:
  goldmark:
    extensions:
      cjk:
        eastAsianLineBreaks: true
        enable: true
    tableOfContents:
      startLevel: 1
      endLevel: 5

# First one{id="first"}
# Second one{id="second"}
# Third one{id="third"}
# Fourth one{id="fourth"}
# Fifth one{id="fifth"}

[razonyang]

I think because of twbs/bootstrap#38367, Hugo can't produce ToC at all even though I modified ToC levels.

That's not true, the issue is about Bootstrap, not Hugo.

The configuration has typo, tableOfContents should belong to markup, not goldmark.

markup:
  goldmark:
    # ...
  tableOfContents:
    # ...

[TetraTheta]

Oh, thank you for letting me know about that mistake!

I fixed the mis-indentation and I can see ToC now. Thank you!

[Gordolin]

Is it possible to disable ToC for some posts, For example in front matter?
Something like toc: false?

[razonyang]

You can create a feature request here, may I ask what is the use case for this?

[Gordolin]

I use sometimes headlines (ToC Level 2-4) in longer blog posts for better readabiltiy. But in this cases i do not need this Headlines as ToC on the right side.

[FuadEfendi]

Hi Razon, I am wondering how to show Heading Level 4 in ToC. It currently shows only Level 2 and Level 3.

[razonyang]

Tweak the table of content.