Table of contents

This extension generates a table of contents for your articles automatically, allowing your visitors to navigate the page easily.

By default, it displays links for every <h2>, <h3>, <h4>, <h5> headings in your article content. You don't no need to copy and paste any HTML or make changes to your article content.

For our clients, we provide a free installation service of our extensions. You can also install an extension by yourself if you like. It is very simple. Use the following instructions.

Installation Usage

1. Unpack the downloaded zip file. There will be three files:

   • toc-min.js
   • toc-min.css
   • Readme.txt

2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

3. Click the theme you want to edit to open it.

4. Click the Edit code button.

5. In the Assets section, click Add asset, then browse to select your files.

   Select all *.js and *.css files from the unpacked zip.  The files are added to your list of asset files.

6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

7. In the document_head.hbs file, paste the following snippet:

   <link rel="stylesheet" href="{{asset 'toc-min.css'}}" />
   <script src="{{asset 'toc-min.js'}}"></script>

8. (optional) If you don't use one of our themes if need to add the following line to the article_page.hbs template:

   <div data-toc></div>

9. Click Publish. The table of contents navigation is displayed in articles.

Options can be passed to the data-toc attribute as a valid JSON object. For example:

<div data-toc='{"headers":"h2,h3"}'></div>

Name	Type	Default	Description
articleBody	String	[data-article]	The CSS selector with article content. It will be used to find heading
headers	String	h2, h3, h4, h5	The CSS selectors are used to identify headings.
title	String	Table of contents	A title that displays on the top. The empty string removes the title.
offsetTop	Number	40	The offset from the top of the screen.
hideIfLabel	String	null	If the article has a label name specified in this option, the Table of Contents will be hidden. You need to pass a list of the current article label names in the lables option.
showIfLabel	String	null	If the article has a label name specified in this option, the Table of Contents will be displayed. The Table of Contents will be hidden in other articles without this label name. You need to pass a list of the current article label names in the lables option.
labels	String	null	Comma-separated list of the article label names.
showEmptyBlock	Boolean	false	Displays the empty Table of Contents if none of headings are found
isFixed	Boolean	true	Makes the Table of contents to be sticky when scrolling