Automatic Table of contents at the side

[0xricksanchez]

One suggestion for this wonderful theme would be including a sticky Table of Contents at the side. This would be particular helpful for longer blog posts.

Reference: https://ghost.org/docs/tutorials/adding-a-table-of-contents/

[0xricksanchez]

If anyone else would like to have a simple ToC at the top of the main page, hacking one into the code injection capabilities is fairly easy:

Add the following to site footer injections:

<!-- Add ToC capabiltiies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>

<script>
    tocbot.init({
    // Where to render the table of contents.
    tocSelector: '.toc',
    // Where to grab the headings to build the table of contents.
    contentSelector: '.post-body',
    // Which headings to grab inside of the contentSelector element.
    headingSelector: 'h1, h2, h3, h4, h5, h6' ,
    // For headings inside relative or absolute positioned containers within content.
    hasInnerContainers: true,
    // Also include collapsed containers
    isCollapsedClass: '',
    });
</script>

<style>
.toc-heading{
    text-align: center;
    font-weight: bold;
}
.toc  ol {
    counter-reset: item;
}

.toc  ol  li {
    display: block;
    margin-left: 10px;
    list-style: decimal;
}

.toc  li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}
</style>

As the first thing in each post just add the following html card:

<div class="toc-container">
    <div class="toc-heading">Table fo contents</div>
    <aside class="toc"></aside>
</div>

Maybe someone can hack this into the theme itself some day. That said one like in the link above would be even nicer