How to add a table of contents in Ghost without editing the site template

According to the tutorial here, if you want to add TOC you actually have to edit the site template (i.e., the handlebar file default.hbs). This is both a hassle and require higher paid tier to do it.

Looking at the tutorial the same can be achieved but direct injecting a small amount of Javascript in your post (or in site settings if you want to do it globally).

Open the side pane and go to "Code injection"

In "Post header" section paste the following (styling tocbot):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">

<style>
    .gh-content {
        position: relative;
    }

    .gh-toc > .toc-list {
        position: relative;
    }

    .toc-list {
        overflow: hidden;
        list-style: none;
    }

    @media (min-width: 1300px) {
        .gh-sidebar {
            position: absolute; 
            top: 0;
            bottom: 0;
            margin-top: 4vmin;
            margin-left: 20px;
            grid-column: wide-end / main-end; /* Place the TOC to the right of the content */
        }

        .gh-toc {
            position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
            top: 4vmin;
        }
    }

    .gh-toc .is-active-link::before {
        background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
    } 
</style>

In "Post footer" section paste the following (load and init tocbot, and create the node to mount it):

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>

<script>
    const parent = document.querySelector(".gh-content.gh-canvas");
	// Create the <aside> element
	const asideElement = document.createElement("aside");
	asideElement.setAttribute("class", "gh-sidebar");
	// Create the <div> element
	const divElement = document.createElement("div");
	divElement.setAttribute("class", "gh-toc");
	// Append the <div> element to the <aside> element
	asideElement.appendChild(divElement);
	parent.insertBefore(asideElement, parent.firstChild);
    
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.gh-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.gh-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3, h4',
        // Ensure correct positioning
        hasInnerContainers: true,
    });
</script>

End result, I think tocbot is quite nice!