DocsOnFlowTable of Contents

Table of Contents

The Table of Contents (TOC) feature automatically generates a navigable index for your posts, improving content structure and reader navigation. This feature can be enabled globally or on specific posts.

OnFlow theme table of contents

Enabling TOC Globally

Code Injection is required to add custom JS.

To enable the Table of Contents feature for all posts on your site, insert the following code snippet:

<script>
window.pvs?.initTOC?.();
</script>

This code snippet activates the Table of Contents for all posts on your site using the default headings h1, h2, and h3. To customize which headings appear, modify the headingsSelector value in the following code snippet:

<script>
window.pvs?.initTOC?.({
	headingsSelector: '.post-content > :where(h1, h2, h3)',
});
</script>

Enabling TOC for Specific Posts

If you prefer to enable the Table of Contents only for certain posts or pages, you can use the internal tag system in Ghost:

  1. Log in to Ghost admin
  2. Go to Posts, and open the post
  3. Open the Post settings sidebar
  4. Specify the #toc to Tags
  5. Click Publish

The Table of Contents will now appear only on posts with the #toc internal tag.

⚠️

Remember that internal tags starting with # are not visible to readers and are used only for theme features and integrations.

Disabling TOC for Specific Posts

In cases where you’ve enabled the Table of Contents globally but want to disable it for specific posts, you can use another internal tag:

  1. Log in to Ghost admin
  2. Go to Posts, and open the post
  3. Open the Post settings sidebar
  4. Specify the #hide-toc to Tags
  5. Click Publish

The Table of Contents will not appear on posts with the #hide-toc internal tag, even if it’s enabled globally.

⚠️

Remember that internal tags starting with # are not visible to readers and are used only for theme features and integrations.