Tip: How to make a Table Of Contents (TOC) For Article Template

Ifra Saqlain

• 1 septembre 2021 17:15
• Modifié

Community Moderator

Prerequisite:

File Name: article_page.hbs, style.css, script.js file

Time To Read: Max 2 min

Time To Embed: Max 4 min

 

Here's a way to create a table of contents in your Article template, that ensures subheadings will be properly indented instead of aligned with the main headings

 

2 min read to learn how to customize the theme.

 

You can use the free plugin by Nikhil Dabas. You can embed easily in your theme, see the below steps:

1). Download the plugin and unzip.

2). Upload the JS files into your assets folder of your Help Centre. See the below screenshot.

3). Now, link the jquery.toc.min.js file and the jQuery library onto your document_head.hbs file, the plugin is jQuery based.

4). Call the TOC function on your script.js file at the bottom area under the Document function.

5). At the end, add the div to show the TOC on the article template.

 

The output is:

 

 

 

Thanks

 

• Anh Le

  • 10 septembre 2022 08:35

  Done. But the format is still ugly.

   

• Eugene

  • 15 septembre 2022 06:33
  • Modifié

  I followed the coding and instructions on this article, but the TOC is still not showing up in my articles. I'm sure if I got any of the coding wrong, but is it possible to provide your examples in code block?

• Ifra Saqlain

  • 15 septembre 2022 10:40

  Community Moderator

  

  

  Hi Eugene, can you share your Help Centre URL here?

• Eugene

  • 16 septembre 2022 05:57

  Ifra Saqlain believe it or not, I redid the code and it worked, I was an absolute idiot, thanks for the guide!

• Ifra Saqlain

  • 17 septembre 2022 04:07
  • Modifié

  Community Moderator

  

  

  It happens when we do coding (I also do mistakes many times when I write code) so don't say idiot for yourself :), 

• Elizabeth Brown

  • 30 novembre 2022 16:34

  Hey folks,

  I want to use this tip to create automated ToCs.

  I also want to control where the ToC appears - ideally after the first couple of intro sentences, which provide context and tell you who can use the feature (which plan it's on).

  Is there any scope for creating an automated ToC that you can insert manually? or would this script not allow that option?

  I am primarily a content person not a code person, so I don't know if what I'm asking is feasible or not. 

  Please advise?

  Cheers

  EB

• Rachel Nix

  • 15 mars 2023 13:32

  Jaïs Pingouroux how do you add the show_toc label to your article?

• Ifra Saqlain

  • 15 mars 2023 17:12
  • Modifié

  Community Moderator

  

  

  If you have been add TOC for your artcles, then you have the toc div on your article_page.hbs file:

  <ul id="toc"></ul>

   

  You only need to put the element above the toc div, like:

  <strong>In this article</strong>
  <ul id="toc"></ul>

Vous devez vous connecter pour laisser un commentaire.