How to enable TOC for all headers

[opabravo]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Is there a way to enable all h2~h6 headeres in TOC section?

Operations you have already tried

• Read through the doc
• Google

Anything else?

No response

[NichtsHsu]

jekyll-theme-chirpy/_javascript/modules/components/toc.js

Line 8 in 5f2edb0

headingSelector: 'h2, h3, h4',

[opabravo]

Hi, thanks for replying,

Since i'm using the starter repo, I can't find the script to edit,

would you like to provide more detailed guidance/refer?

[kungfux]

@opabravo In case of starter, there is no way to override javascript files, it seems. However, we can add our own. So, here is the solution for blogs created by starter:

Create a file assets\js\custom-toc.js with the configuration you want:

!function(){
    "use strict";
    document.querySelector("main h2, main h3")&&tocbot.init({
        tocSelector:"#toc",
        contentSelector:".content",
        ignoreSelector:"[data-toc-skip]",
        headingSelector:"h2, h3, h4, h5, h6",
        orderedList:!1,
        scrollSmooth:!1
    })}();

Since custom scripts are being executed later, it overrides configuration successfully. However, I'm not sure this will work stable for 100%, but it seems to work.

[huanyushi]

@kungfux Perhaps I didn't make myself clear earlier. Please allow me to restate it.

In case of starter, there is no way to override javascript files, it seems.

I have created a file _javascript\modules\components\toc.js, it can not override the theme's javascript file, as you said.

Create a file assets\js\custom-toc.js with the configuration you want:

So I followed the solution you mentioned later. I create a new file assets\js\custom-toc.js, like this:

!function(){
    "use strict";
    document.querySelector("main h2, main h3")&&tocbot.init({
        tocSelector:"#toc",
        contentSelector:".content",
        ignoreSelector:"[data-toc-skip]",
        headingSelector:"h2, h3, h4, h5, h6",
        orderedList:!1,
        scrollSmooth:!1,
        collapseDepth:6,
    })}();

I want the post to display all TOC without animation. After creating this file, and run bundle exec jekyll s, the TOC does not change.

So it seems like this method isn't effective, or perhaps I missed something. Do I need to insert <script src="{{ site.baseurl }}/assets/js/custom-toc.js"></script> into some file? I have no idea.

Could you provide more specific details? I'm not familiar with javascript, any suggestions would be greatly appreciated.

Relevent link: #1616

[kungfux]

@huanyushi I gave it a try and it didn't work for me either anymore. I found no changes that may break it, so I have no ideas to share at the moment.

[huanyushi]

@kungfux Thanks for your reply sincerely, maybe I should create a new discussion later.