How to add a table of contents in Ghost without editing default.hbs

Hello, everyone 👋

Many people have probably accessed the tutorial provided by Ghost on how to add a table of contents, as shown in the link below.
https://ghost.org/tutorials/adding-table-of-contents

The method provided by Ghost is written for developers, so it is complicated and time-consuming.
In this post, we offer a simple and easy way to create a table of contents that anyone can follow, even if you are not a developer.

※ The method provided by Ghost applies to all posts, but the method in this post requires manual work.
It is written based on the Ruby theme.

#STEP 1

<script src="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css" rel="stylesheet">

place code at Post header ghost_head

#STEP 2

<script>
    tocbot.init({
        tocSelector: '.toc',
        linkClass: 'toc-link',
        orderedList: true,
        headingSelector: 'h1, h2, h3',
        collapseDepth: 3,
        contentSelector: '.gh-content',
        ignoreSelector: '.kg-header-card > *',
        headingsOffset: 40,
        scrollSmooth: true,
        scrollSmoothDuration: 420,
        scrollSmoothOffset: -40,
        hasInnerContainers: true
    });
</script>

place code at Post header ghost_foot

#STEP 3

<div class="toc"></div>
<style>
    .toc:before {
        content: "Table of content";
        display: block;
        margin-bottom: 20px;
        font-size: larger;
        font-weight: bold;
        border-bottom: 1px dashed #dadada;
        padding-bottom: 10px;
    }

    .toc {
        padding: 30px;
        border: 1px solid #dadada;
        border-radius: 5px;
        background-color: #fafafa;
    }

    a.toc-link {
        font-size: 80%;
        text-decoration: none;
    }

    li.toc-list-item {
        margin-top: 0;
    }

    .toc-list .is-collapsible {
        margin-left: 15px;
        color: #666;
    }
</style>

Use HTML card to insert the table of contents everywhere you like

#STEP 4

<h1 id="title#1">Title #1</h1>

and, if you create titles using 'h1, h2, h3' with an HTML card, they will be included in the table of contents.
※ You need to input an id to specify what each table of contents link item points to.

---

How can I display the table of contents on the left or right side instead of at the top of the post?

instead of the STEP 3 HTML card code you added earlier, write the code as follows.

<div class="toc"></div>
<style>
    .toc:before {
        content: "Table of contents";
        display: block;
        font-size: larger;
        font-weight: bold;
        padding-bottom: 20px;
    }

    .toc {
        position: fixed;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        padding: 30px;
        border: 1px solid #dadada;
        border-radius: 20px;
        background-color: #fafafa;
        @media (max-width: 1200px) {
            display: none;
        }
    }

    a.toc-link {
        font-size: 80%;
        text-decoration: none;
    }

    li.toc-list-item {
        margin-top: 0;
    }

    .toc-list .is-collapsible {
        margin-left: 15px;
        color: #666;
    }
</style>

Next, proceed to STEP 4.

Note when inserting the table of contents automatically using TOCBOT
After you have installed TOCBOT, add the following HTML card to any post you want.

An extremely important note is that each theme will not be the same and will have different content classes. contentSelector: '.gh-content'

You can access the preview or uploaded post and use the browser's 'Developer Tools' to check what values the post is based on.

After clicking the mouse icon highlighted in red, hover over the content of the post to find the content id value used by the theme.

Then, simply change the value of the contentSelector you entered in ghost_foot, and you're done!

Thank you for reading it 😁

reference document: https://ghostfam.com/en/create-a-table-of-contents-for-ghost