TOC

Pagekit Table Of Contents Extension

Provide your users a better overview of your contents. This extension adds a table of contents to your pages.

You are free to define numerous options including adding your own CSS.

How To Use

Installation

Using this extension is very easy. Just install it from Pagekit's marketplace.

Configuration

After enabling the extension, click on "Table Of Contents" in the extension's overview.

TOC settings

Now you may choose, if you want the Table Of Contents to be inserted automatically. If you choose to do so, please choose, on which pages the TOC should be inserted.

Using this method the TOC is always added to the content of the page.

Table Of Contents

You can also choose to use the TOC as a widget. In this case you uncheck the checkbox titled Insert TOC automatically and switch over to Sites > Widgets.

Important: If you are using the auto-insert-mode, you can not use the widget on the same page.

Configuration details:

  • Widget mode: The widget form contains all parameters you are able to set.
  • Global mode: Click on Show Details to get a list of all parameters you are able to set.

Parameters

  • Custom CSS: Add your own CSS, which is only added to your view, if a TOC is used.
  • Custom JS: Add your own JS, which is only added to your view, if a TOC is used.
  • TOC Class: Attach a class to the table of contents
  • Content Selector: Choose, which parts of the page can be considered as article content. This prevents other headings (e.g. Widget-Headings) from being added to the TOC.
  • Ignore Selector: Headings, that are matching this selector are excluded from the TOC.
  • Smooth Scroll: Enable/Disable smooth scrolling
  • Smooth Scroll Duration: Smooth Scroll duration in ms
  • Link Class: Attaches a class to a TOC link
  • Active Link Class: Attaches a class to the active link in the TOC
  • List Class: Attaches a class to the TOC list
  • List Item Class: Attaches a class to the TOC list elements
  • Collapsible Class: Attaches a class to items, that are collapsible
  • Collapsed Class: Attaches a class to collapsed items
  • Collapse Depth: Defines the number of heading levels that should be collapsed
  • Throttle Timeout: Timeout between events
  • Heading Offset: Defines the offset between the top of the document and the headings
  • Position Fixed Selector: Choose the element you want to add a sticky-class to
  • Position Fixed Class: Class to define a fixed position
  • Fixed Sidebar Offset: Define sidebar offset
  • Heading Selectors: Choose, which headings (h1, h2, h3, ...) should be added to the TOC
CMS
Pagekit
Toc-1

Toc-1

Settings view

Toc-2

Toc-2

Settings view

Toc-3

Toc-3

Settings view

Toc-4

Toc-4

Settings view

Toc-5

Toc-5

Frontend view

Toc-6

Toc-6

TOC in a widget

Toc-7

Toc-7

Widget settings

Wait a second!

Did you know that there's are great support channels for Pagekit? Visit us today and sign up for free using email or your GitHub-, Twitter-, Google- or Facebook-Account.

Latest blog posts

Latest comments

  • How to fork a theme

  • spqr/toc updated

  • spqr/toc updated

Like my work?

If you would like to support my work, you are invited to do so.