Extra - CMS-TOC

Generate a table of contents for a page, based on the headings within the page.

Initialization

To load this functionality from HTML:

<script>
CMS.loadExtra('cms-toc');
</script>

or from within config.js

extras: {
  'cms-toc': {}
}

Configuration

N/A

Required Schema

No schema is required, but use of heading tags (H1-H6) is required for the table of contents to be generated.

Usage

<ul is="cms-toc"></ul>

Note, when used in Markdown files, the directive must be on a single line.

<ul is="cms-toc"></ul>

These will generate the example result:

<ul is="cms-toc">
    <li class="level-0">
        <a href="#">(Top)</a>
    </li>
    <li class="level-0">
        <a href="#some-heading">Some Heading</a>
    </li>
    <li class="level-1">
        <a href="#some-subheading">Some Subheading</a>
    </li>
</ul>

Example Styles

ul[is=cms-toc] {
    list-style: none;
    padding-left: 0;
    border-top: 1px solid;
}
ul[is=cms-toc] li {
    margin: 1rem 0;
    padding-left: 0;
}
ul[is=cms-toc] li.level-1 {
    padding-left: 1rem;
}
ul[is=cms-toc] li.level-2 {
    padding-left: 2rem;
}
ul[is=cms-toc] li.level-3 {
    padding-left: 3rem;
}
ul[is=cms-toc] li.level-4 {
    padding-left: 4rem;
}