evoTOC Plugin
Plugin for automatically creating a Table Of Contents on a page using anchors.
EVO Version: Evolution 1.4x, Evolution 2.x, Evolution 3.x
Plugin for automatically creating a table of contents on a page using anchors. Based on TOC plugin for Evo 1x, completely fixed, rewritten and improved.
Table of Contents
What's new in evoTOC
Here are the main updates made to the plugin in order of importance:
Key Features
- Added Back to Top
- Performance Optimization
- Improved code structure
- Added support for including specific templates (not just exclusions)
- Added level-configurable back to top (e.g., only on H2 or H2 and H3)
- Fixed TOC generation issue with long documents
TOC Management
- Made anchor ID (#table-of-contents) configurable
- Added check that back to top levels are within TOC range
Configurability
- Added option for templates to include
- Made back to top text configurable
- Made back to top title configurable
- Made CSS class configurable
All these changes have transformed the plugin from a simple TOC generator into a more complete and flexible tool, while maintaining compatibility with existing installations.
Installation instructions
- Install with Extras Module
evoTOC Plugin
Parameters
- Start level - the starting level of the heading (H1 - H6)
- End level - the ending level of the heading (H1 - H6)
- Transliteration - will be used for the first type of anchors. TransAlias plugin tables are used.
- Title - title for the table of contents. If the field is empty, the title is ignored.
- CSS class - the style class that will be used in the table of contents (container and nested levels)
- Anchor type - different variants of generating the anchor name. 1 - transliteration, 2 - numeration
- Maximum anchor length - used in transliteration and limits the length of the anchor name
- Include only these Templates - A comma separated list of templates id where the TOC should be generated
- Exclude Documents by id - A comma separated list of documents id to exclude from the plugin and TOC generation
- Exclude Templates by id - A comma separated list of templates id to exclude from the plugin and TOC generation
- Enable back to top - Enable back to top feature
- Back to top text - text (or icon) displayed in back to top link
- Back to top title attribute - title attribute for back to top link
- Back to top CSS class - css class for back to top link
- Back to top on headings - comma separated list of heading (e.g. 2,3)
- TOC anchor ID - customizable ID for the TOC anchor
Usage
After generation, the table of contents is placed in the global placeholder [+toc+]. Therefore, to display it, you just need to place this placeholder in the appropriate place.
CSS Styling Example
.toc {
background-color: #f9f9f9;
border: 1px solid #499bea;
padding: 10px;
margin-bottom: 20px;
}
.toc a{
text-decoration: none;
}
.toc .title {
font-weight: bold;
font-size: 1.2em;
line-height: 2em;
margin-bottom: 25px;
color:#499bea;
}
.toc ul {
counter-reset: li;
list-style-type: none;
}
div.toc > ul {
padding: 0;
margin-left: 25px
}
div.toc > li {
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.toc ul li, .toc li {
font-weight: 600;
}
.toc > li.TocTop {
padding-left: 25px;
}
.toc ul.lev2 li {
font-weight: 400;
padding-left: 38px;
margin-bottom: 0px;
}
.toc li::before, .toc ul li::before {
counter-increment: li;
content: counters(li,".") ".";
padding-right: 5px;
}
.toc-back-to-top-container {
margin-top: -1.5em;
margin-bottom: 2em;
text-align: right;
}
.toc-back-to-top {
font-size: 0.8em;
text-decoration: none;
opacity: 0.7;
}
.toc-back-to-top:hover {
opacity: 1;
}
