Skip to content

Instantly share code, notes, and snippets.

@ahmadajmi
Last active December 23, 2020 15:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahmadajmi/4645d40acf8311aa6d105605399c0ff8 to your computer and use it in GitHub Desktop.
Save ahmadajmi/4645d40acf8311aa6d105605399c0ff8 to your computer and use it in GitHub Desktop.

1. Add the following code in Ghost admin Code Injection (Site Footer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.2/tocbot.js"></script>
<script>
  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.c-content', 
    hasInnerContainers: true
  });
</script>

Screen Shot 2020-07-21 at 3 30 20 PM


2. Open the post.hbs file and add the follwing before the {{ content }} line

<h3>Table of Content</h3>
<div class='toc'></div>

Screen Shot 2020-07-21 at 3 31 43 PM

@ahmadajmi
Copy link
Author

ahmadajmi commented Jul 21, 2020

Built with Tocbot


The result will be like

Screen Shot 2020-12-23 at 5 20 17 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment