table of contents ghost

How to add table of contents in Ghost CMS?

In this article, we will discuss how to add table of contents to  Ghost CMS blog post.

  1. Login to your Ghost platform.
  2. While writing your article, use H1 and H2 tags as needed.
  3. Once you complete the post, add the following code to the end of the post.
  4. Click on the + button and click add HTML. add html ghost
  5. Add the following code.
    • <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=” crossorigin=”anonymous”></script>
      <script>
      var contentsTitle = “Table of Contents”; // Set your title here, to avoid making a heading for it later
      var ToC = “<h2>”+contentsTitle+”</h2>”;
      ToC += “<nav role=’navigation’ class=’table-of-contents’><ul>”;
      var first = false;
      $(“h2,h3″).each(function() {
      var el = $(this);
      if (first === false) {
      first = true;
      $(‘<span id=”dynamictoc”></span>’).insertBefore(el);
      }
      var title = el.text();
      var link = “#” + el.attr(“id”);
      if (el.is(“h2”)) {
      ToC += “<li><a href='” + link + “‘>” + title + “</a></li>”;
      } else if (el.is(“h3”)) {
      ToC += “<li style=’margin-left:2em’><a href='” + link + “‘>” + title + “</a></li>”;
      }
      });
      ToC += “</ul></nav>”;
      console.log(ToC);
      $(“#dynamictoc”).html(ToC);
      </script>
Select your currency
USD United States (US) dollar