TOC min / max header level configuration

[mrmanc]

Description

Really pleased to see that there is a table of contents feature! I’d love to be able to configure the min and max header levels to include. I’ve half accomplished this by overriding the toc.html to use min: 1 and max: 6, but the style doesn’t work with the nested lists properly. Ideally, the TOC entries would continue to indent up to the maximum. I’d offer a pull request but the styling is a little beyond my skillset.

Expected behavior

Specify following in front matter:

layout: single
toc: true
toc_min_header: 1
toc_max_header: 6

Headings from <h1> to <h6> should appear in the table of contents, and <h3> should be more indented than <h2>.

[mmistakes]

You have a published version somewhere I can look at to see if it's a simple CSS fix or not.

Getting the nested lists to indent properly is tricky and causes all sorts of layout issues past a level or two. That's partially why I limited it. That and the space is so narrow that after a few indents you get text that normally fit on one line is broken up into 3 or more lines... which looks ridiculous.

[mrmanc]

Here’s a published version with plenty of headings to work with: https://markcrossfield.co.uk/minimal-mistakes-toc/

If there isn’t enough space for indents, is changing the text size an option to indicate the level?

[luispuerto]

I'm interested in this feature too! I would like to be able to have a toc with at least a couple more levels.

[mmistakes]

Adding a few more lines of CSS seems like it could fix the indents.

I added these lines and seems to do the trick. Could you link me to the Markdown source for this page? I'd like to add it as a test so I can tweak the indents better and make sure the new styles don't break anything.

.toc__menu li ul li ul > li a {
  padding-left: 2.5rem;
}

.toc__menu li ul li ul li ul > li a {
  padding-left: 3rem;
}

.toc__menu li ul li ul li ul li ul > li a {
  padding-left: 3.5rem;
}

[mrmanc]

That looks great!

Apologies—the source would have been useful information for you… didn’t think about the fact my CNAME obscures the original repo address!

https://github.com/mrmanc/minimal-mistakes-toc/blob/master/index.html

[allejo]

Yo @mmistakes, me again!

A while back it was requested to allow jekyll-toc to add classes based on the heading level. It's the item_class parameter to the snippet and here's an example of how to use it.

Just a friendly FYI if you'd like to give it a try to avoid so much CSS nesting.

[mmistakes]

Thanks @allejo, this is helpful.

[mmistakes]

Merged in enhancements to support nested TOC levels 1-6 on the master branch.

An example can be seen here.
https://mmistakes.github.io/minimal-mistakes/layout-table-of-contents-indent-post/

[mrmanc]

Awesome, thanks for your work on this—our deep documentation page will look much better :)