Increasing TOC levels

[sukhjinder-kumar]

NOTE: Before you start, the following should be completed.

• Read Wiki to understand the usage and the correct effect of functional design.
• Make sure no similar issue(including closed ones) exists.
• Try to find the answer on Jekyll Forum and StackOverflow.

Description

I want to display h4 headers in the table of content. I tried changing the toc.html and toc.js files. There is a related issue dealing with h1 headers however that solution (the below one changing the toc.js file) doesn't work. There are a few more issues by the same title (!) but those are based on bootstrap-toc, however, tocbot does allow for an increased level of TOC.

In toc.js file I added h4 in headingselector and querySelector. As according to tocbot github repo changing headingSelector should do the trick.

export function toc() {
  if (document.querySelector('#core-wrapper h2,#core-wrapper h3,#core-wrapper h4')) {
    // see: https://github.com/tscanlin/tocbot#usage
    tocbot.init({
      tocSelector: '#toc',
      contentSelector: '.post-content',
      ignoreSelector: '[data-toc-skip]',
      headingSelector: 'h2, h3, h4',
      orderedList: false,
      scrollSmooth: false
    });
  }
}

In toc.html I added or page.content contains '<h4' in line 3.

{% assign enable_toc = false %}
{% if site.toc and page.toc %}
  {% if page.content contains '<h2' or page.content contains '<h3'  or page.content contains '<h4' %}
    {% assign enable_toc = true %}
  {% endif %}
{% endif %}

{% if enable_toc %}
  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
    <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
    <nav id="toc"></nav>
  </div>

  <!-- toc.js will be loaded at medium priority -->
  <script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
{% endif %}

Both changes didn't allow for h4 header showing up in toc. Any idea how to show h4 (or for that matter any subheaders) in table of content.

[v4vong]

You need to compile by running npm i && npm run build after modifying the JS file.

[sukhjinder-kumar]

Thank you for your help but I ran it some issues. I downloaded the package.json file and put it in the blog folder. From there (after making the aforementioned changes) ran the command npm i followed by npm run build. Later shows the following error, [!] RollupError: Could not resolve entry module "rollup.config.js". I put the respective file and ran the later command again. It shows that yet another file is not found. And this goes on. Do I need to put all the files in the main folder? If yes, why would they not be available by default?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.