How to use the TOC widget

Adding the TOC widget to your Ghost blog is easy. Just follow the following two steps to copy and paste code to your Ghost websites.

Step 1: Add code to the "Site header"

The code you get from Rakihub TOC has three lines. The first two lines appear as follows, and you need to put them into the "Site header".

Navigate to Ghost Settings --> Advanced --> Code injection --> Site header, copy and paste the first two lines of code into the "Site header". This adds the styles and script for the TOC.

<script src=... defer></script>
<link rel="stylesheet" href=...>

Step 2: Add TOC to your posts

To display TOC in posts, you need to place the third line of code you get from Rakihub TOC within your posts. There are two ways to add it into posts: directly add in posts or add in theme files.
The third line looks like this:

<aside class="raki-toc-container" ...></aside>

Option 1: Add to posts

In the post editor, at the beginning of your post, choose "HTML" and paste the third line of code.

Please note that, using this method, you need to add the code to each post where you want the TOC to appear.

Option 2: Add to theme file

To add TOC for all your posts at once, you should modify theme file directly. Please follow these steps to modify:

• Export theme: Navigate to Ghost Settings --> Design & branding --> Change theme --> Installed. Export the 'active' theme by clicking the three dots "..." on the right side.
• Modify post template: after unzipping the theme file, you can find "post.hbs" file which is the default template file for posts. In the "post.hbs" file, locate the line of code: {{content}}, put the third line of code before the {{content}} as shown below:

<aside class="raki-toc-container" ...></aside>
{{content}}

Note that some themes may have more than one post template file, so modify the ones where you want the TOC to appear.

• Upload: Compress the theme files into a zip file, and upload it back to Ghost. You can find the upload option at Ghost Settings --> Design & branding --> Change theme --> Upload theme.

If you have any questions about the TOC widget, feel free to contact us at 📮 [email protected]