Feb 19, 2024 2 min read About Chapter

Post Outline

This will be a post about the Outline (headings) of the posts

About the Outline feature

The Outline section is controlled via Settings -> Design -> Post , the Show post outline setting.

By default, this only applies to Post entity, not Page. Disabling this setting will disable it in every post.

Furthermore, the outline toggle, found in the bottom of the page, remembers the setting the user has selected and will appear expanded or collapsed based on it's last state, even if you reload the page or navigate to a different page that has an Outline enabled.

However, you can use a special helper tag #chapter-outline-show to both:

• Display the Outline in Pages
• Display the Outline in Posts, even if the global Show post outline setting is disabled

Generally, the Outline has all the features of tocbot as found in it's documentation:

• Automatic navigation to the selected heading
• Automatic collapse/expand based on the current headings in focus
• Ability to ignore certain headings (i.e. ones inside toggles) by adding js-toc-ignore CSS class to the heading element

By default the outline is expanded up to the 3rd layer and captures tags h1, h2, h3, h4, h5 and h6.

You can modify this behaviour in default.hbs file down at the very bottom:

    ...
    
    <script src='{{asset "built/main.min.js"}}'></script>
    
    {{! Initialize Tocbot after you load the script }}
    <script>
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.ch-outline',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.gh-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3, h4, h5, h6',
            // Ensure correct positioning
            hasInnerContainers: true,
            // Non-collapsed levels of headings:
            collapseDepth: 3,
        });
    </script>
    
    {{ghost_foot}}

  </body>
</html>

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.