Progress

Add Table of Contents to Ghost CMS Blog Post or Article

Add Table of Contents to Ghost CMS Blog Post or Article

Table of contents is the collections of all headings and subheadings of the whole post content.
Table of contents is an important part of every post because it lets users get a brief overview of contents inside the post. It is also good for SEO because google shows title snippets under the search results.

It is very easy to integrate a table of contents in your Ghost blog by using a lightweight script which automatically generates a table of contents.

Why the table of Contents is Important?

Table of contents is an important part of every blog. It guides users to the right part of the post to get the information they need.

Writing 2000+ words posts are important for both search engines and users.

Long posts tend to rank higher as compared to shorter ones, it is also considered to quick win in SERP if your competitors write short posts.

Users also like long posts because they can get each and every information in detail.

So here is the use case of the table of contents.

It helps users to migrate at a certain point of content and get the actual details or information they need.

Search engines show headings from the table of contents in actual google search results which increase the click-through rate.

How to Insert Table of Contents in Ghost blog?

I will add the easiest way to add a table of contents in Ghost CMS blog. TOC Bot is a javascript file which automatically generates a table of contents for your content. The fun part is that it does not require any technical knowledge to implement that and it is lightweight.

Step 1: Add JavaScript file

There are two ways to add javascript file on your website, using code injection or by editing your theme default.hbs file.

Using the Code injection option

If you do not have any coding knowledge then code injection is the best option for you.

Get Latest TOC Bot Script from here and go to you Ghost CMS admin and navigate to code injections option. The script will look like the code below, put it in the footer section.

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

Add this script also in the Footer Section to initialize the TOC bot. Remember to put it in the footer section only after the content loads.

<script>

tocbot.init({
// Where to render the table of contents.
tocSelector: '.hc-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.post-content',
// 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,
});

</script>

The footer code injection will look like this after completing this step.

script code injection in footer section

Editing the theme file

This is the most reliable and permanent solution but requires you to edit the theme default.hbs file.
Open default.hbs file with add the script above the closing body tag (the script needs the content to be loaded).

script code in theme file
TOC Bot script above the closing body tag in default.hbs of Casper theme.

Step 2:Display the Table of Contents

The TOC Bot initializer code looks for a div with class name hc-toc and injects the table of contents inside that.
Again there are two ways to add the div on your website to display the table of contents. Using the HTML code in any post or page using the editor or by editing the theme post.hbs file.

Using the post editor

This step is convenient only when you need to display table of contents on only one post.
Add this code as the HTML code on the top of your post.

<div class="hc-toc"></div>

By editing the theme

This is the best possible way in Ghost CMS to add the table of contents to each and every post automatically.
Open your post.hbs file and paste the following code where you want to display the table of contents. It is good to use this between the featured image and the actual content.

<div class="hc-toc"></div>
html code in ghost cms theme file to display table of contents
Now table of contents will show between featured image and actual contents in Ghost CMS.

Done, you can now visit any post and you will see the table of contents there. It will need some styling to look good.
You can either add default CSS theme provided by TOC Bot or create your own. It is good to create your own theme for a custom table of contents on your blog.
It is easier then you think. If you know some basics of CSS, you can try to write your own theme or copy-paste the CSS themes below.

Styling Ghost CMS TOC

Here is a very basic styling to display nested numbering and a heading in table of contents.
Here is the extended HTML Code.

<div class="toc-container">
    <div class="toc-heading">Table fo contents</div>
    <div class="hc-toc"></div>
</div>
add html code in ghost cms editor
Editor after placing the HTML Code

The CSS code style the table of contents. You can either place them in themes stylesheet files or header or footer section of code injection.

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

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

.hc-toc  li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}
</style>
style code in header injection
Site header style injection

Done. This is how the final table of contents in Ghost CMS will look like.

ghost cms table of contents preview
Final Output

The code is tested on Casper theme and Ghost starter theme, if any problem occurs then use the comments section.

Share the Post ;)

Related Posts