Download the PHP package craftsnippets/table-of-contents without Composer
On this page you can find all versions of the php package craftsnippets/table-of-contents. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download craftsnippets/table-of-contents
More information about craftsnippets/table-of-contents
Files in craftsnippets/table-of-contents
Package table-of-contents
Short Description This plugin generates a table of contents from HTML headers in text.
License MIT
Informations about the package table-of-contents
Table of contents plugin for Craft CMS 3.x
This plugin generates a table of contents from HTML headers in text. Anchor links in table direct to corresponding headers in text.
Table of contents can be nested - nesting level will be based on header level.
Here's screenshot of example table of contents generated by plugin:
Requirements
This plugin requires Craft CMS 3.0.0-beta.23 or later.
It also requires Anchors plugin, since it makes use of its internal functions.
Installation
You can install this plugin from the Plugin Store or with Composer.
To install plugin with composer, run following command:
Then in the control panel go to settings, plugins - and click "install" next to "table of contents".
Usage
To create the table of contents, you need to pass HTML containing headers to craft.toc.getLinks
function and output returned data using {% nav %}
Twig tag.
Don't forget to also put your HTML through anhors
filter provided by Anchors plugin - it will add id
attribute to headers, so anchor links inside the table of contents have something to direct to.
Remember to use anchors
filter after passing HTML to getLinks
function. Otherwise, links in table of contents would contain escaped HTML content of links that were added to headers by Anchors plugin.
Don't forget to give each of your links bit of left margin to show their hierarchy.
Nested numeric list
To display numeric count before links within the table of contents, you can use bit of CSS. This will work also for nested lists.
Alternative header tags
By default, Table of contents plugin searches for h1
, h2
and h3
tags. Just like in Anchors plugin, this can be overwritten by passing the second argument to getLinks
function.
Don't forget to do the same when using anchors
filter.
non-ASCII characters mapping
The third parameter of getLinks()
method can be used to change non-ASCII character used to generate link hashes, just like with the anchors plugin. Here's a quote from anchors plugin documentation:
The anchors filter will convert any non-ASCII characters to ASCII, using the current site’s language’s ASCII character mappings by default. If you are displaying content in a different language than the current site, use the language argument to override which ASCII character mappings should be used.
Here's the example usage:
Stripping tags from links text
If headers which are converted to links contain some html tags inside them, links within table of contents will contain these tags too. You can disable this by setting fourth parameter of getLinks()
method to true
.
Smooth scrolling
You can achieve smooth scrolling effect with single CSS property.
Unfortunetly it does not wok on Safari or IE - see more on caniuse.
Same effect that works in all modern browsers can be achieved with this jQuery code:
If a user start to scroll (using mouse scroll wheel) during an animation, scrolling will be canceled to avoid "fighting" with it.
Despite animation replacing click
event, hash will still be appended to URL and browser back or forward buttons will work - thanks to use of JavaScript history API.
Icon made by Dave Gandy from www.flaticon.com.
Brought to you by Piotr Pogorzelski