Add a table of contents to your pages

Pagecord now has a new dynamic variable for building a table of contents automatically:

{{ table_of_contents }}

When this is added to a page, Pagecord will build a nested list of links from all the headings in that page. It uses headings from h2 through to h6, so the page title stays as an h1 and is excluded from the table of contents.

This variable is particularly handy for long pages like help docs.

If you want to add a heading above the table of contents but exclude it from the table itself, use the heading parameter like so:

{{ table_of_contents | heading: "Table of Contents" }}

If you like, you can style the table of contents using Custom CSS:

<ol class="table-of-contents">
  <li class="toc-h2">
    <a href="#getting-started">Getting started</a>
    <ol>
      <li class="toc-h3">
        <a href="#posting-by-email">Posting by email</a>
      </li>
    </ol>
  </li>
</ol>

As with all Pagecord's dynamic variables, table of contents only works on pages, not regular posts.