Separate Table of Content

I was wondering if there’s a way to generate a separate table of content base on the main content?

I tried a few different things but did not seem to worked well, cause i am trying to get this working on GitHub Enterprise 2.8 Pages.

I tried jekyll-toc (https://github.com/toshimaru/jekyll-toc), and used it as a plugin, it worked in development, but doesn’t work on GHE 2.8.

kramdown have its own ToC generation, but I don’t think you can filter it the same way you can with jekyll-toc. Meaning I can’t have it outside of the markdown page.

Or if there’s other suggestion I can use?

GitHub Pages only allows a few select plugins which is why jekyll-toc didn’t work for you when deploying there.

Here’s a Liquid only method that’s compatible with GH Pages and provides more flexibility than Kramdown’s automatic TOC creation.

https://allejo.io/blog/a-jekyll-toc-in-liquid-only/

1 Like

thanks @mmistakes, i tried it out and it worked well.

Thanks @YTKme for asking and @mmistakes for sharing. o/

That’s a great solution and works as expected, one question though… does any of you guys have tried to check if the TOC exists?

At first, I tried to have an <h2> Content/TOC:</h2> with:

{% if my_min %}
    <h2> Content/TOC:</h2>
    {% include toc_pure_liquid.html html=content sanitize=true h_min=my_min h_max=my_max %}
{% endif %}

I tried also {% if my_min >= 1 %} and {% if my_min and my_max %}. Liquid skill <= 0 over here…

But ideally the h2 would be a variable that could be set from _config.yml, and it would be even better if there was a conditional summary on the post’s front matter (like the post.excerpt). Something like:

{% if TOC %}
    <h2>{{ site.TOC }}</h2>
    <div class='whatTheTOC'>{{ post.summary }}</div>
    {% include toc_pure_liquid.html html=content sanitize=true h_min=my_min h_max=my_max %}
{% endif %}

The reason is that there are posts so short that they don’t have any header, and there are posts with so many headers that would be polite to summary them up.

Thanks in advance

1 Like

You have to keep in mind that h_min and h_max are parameters for how the TOC is generated, it has nothing to do with whether or not the markdown you’re using actually has headings. If you’d like to check if a TOC was actually generated, you’d have to use {% capture %}. Because nothing will be generated if there are no headings, you can check if the rendered TOC is blank.

{% capture toc %}
{% include toc_pure_liquid.html html=content sanitize=true h_min=my_min h_max=my_max %}
{% endcapture %}

{% unless toc == blank %}
    <h2>{{ site.TOC }}</h2>
    <div class='whatTheTOC'>{{ post.summary }}</div>
    {{ toc }}
{% endunless %}
1 Like