Samuli Natri
Sep. 13, 2016
Updated: Nov. 19, 2016
0
By Samuli NatriSep. 13, 2016
(Updated: Nov. 19, 2016)
0

Automatic Table Of Contents With Toc Filter Module (Drupal 8 Tutorial #45) (Article + Video)

Toc Filter module creates table of contents from header tags.

Note: at the moment (2016.09.13) there isn't yet a stable release for the module.

How to install it?

drush -y en toc_filter

How to display it automatically?

  • Go to Configuration > Content authoring > Text formats and editors
  • Edit Full HTML text format
  • In Enabled filters, check Display a table of contents:

  • In Filter settings, select At the top of the page in the Automatically include table of contents dropdown:

Now we have table of contents at the top:

  • With little bit of styling...
.toc-tree {
  font-size: 14px;
  padding: 1em;
  margin: 0.5em 0 1em 1em;
  float: right;
  border: 1px solid #ccc;
  border-radius: 5px;
  h3 {
    font-size: 16px;
    margin-top: 0px;
  }
  ol {
    margin-bottom: 0px;
  }
}
  • It can look like this:

 

  • It is also responsive:

How to display it with a token?

  • Use [toc] token in the editor:

    Table of contents types

    You can create table of contents types or edit the default ones:

    Example 1

    How to use roman numbers and allow only one level of headings:

    • Go to Structure > Table of contents types and edit the Default type.
    • In HEADER SETTINGS, set header maximum level as H2:
    • In the NUMBERING SETTINGS, select Numbering type as lower-roman.

    How to display it in a block?

    Note: at the moment (2016.09.13) the block didn't work with beta1 or dev version: https://www.drupal.org/node/2789097. Update (2016.09.20): it seems to work when you add the toc token somewhere in the body.

    • Edit Full HTML text format
    • In Filter settings, select Display table of contents in a block:

    • Go to Structure > Block layout
    • Place table of contents block in the content section:

    • Drag it above the Main page content

    Check the video to see it in action!

    Samuli Natri is the founder of WDTutorials.com. He started building Drupal sites in 2010 with Drupal 6. He attended Helsinki University and Helsinki University of Technology (Social Sciences and Computer Science). Read more...

    Add new comment