Tabla de contenido altamente personalizable generador-Tocbot

Vista prévia

Descripción

Tocbot es un generador TOC (tabla de contenido) fácil y altamente personalizable creado con JavaScript puro. Le permite generar automáticamente un menú de navegación interactiva en la página de los elementos de Headling con soporte para scrollspy y scroll suave.

¿Cómo funciona?

Instalar el Tocbot a través de NPM:

# NPM
$ npm install tocbot --save

Importe los recursos necesarios en el módulo.

import Tocbot from 'tocbot';

Alternativamente, puede cargar los archivos del Tocbot desde una CDN.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.1.1/tocbot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.1.1/tocbot.min.js"></script>

Agregue identificadores únicos a sus elementos de Headling dentro del documento.

<div class="js-toc-content">
 <h1 id="1">Section 1</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. Nullam sed vestibulum purus, in auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas dolor metus, molestie nec eros non, suscipit efficitur erat. Nulla ante odio, tristique sed nisi id, ultrices vulputate magna. Nunc congue nibh non lorem ultricies congue. Donec non metus vitae purus semper interdum eget a augue. Nullam sem ante, finibus eget sapien ultricies, pretium accumsan felis. Donec eget nulla orci.</p>
 <h2 id="2">Section 2</h2>
 <h2 id="3">Section 3</h2>
 ...
</div>

Cree un contenedor para colocar la tabla de contenido generada.

<div class="js-toc"></div>

Inicializa la librería Tocbot y listo.

tocbot.init();

Override the following options to customize the table of contents.

tocbot.init({


// Where to render the table of contents.

tocSelector: '.js-toc',


// Where to grab the headings to build the table of contents.

contentSelector: '.js-toc-content',


// Which headings to grab inside of the contentSelector element.

headingSelector: 'h1, h2, h3',


// Headings that match the ignoreSelector will be skipped.

ignoreSelector: '.js-toc-ignore',


// Main class to add to links.

linkClass: 'toc-link',


// Extra classes to add to links.

extraLinkClasses: '',


// Class to add to active links,

// the link corresponding to the top most heading on the page.

activeLinkClass: 'is-active-link',


// Main class to add to lists.

listClass: 'toc-list',


// Extra classes to add to lists.

extraListClasses: '',


// Class that gets added when a list should be collapsed.

isCollapsedClass: 'is-collapsed',


// Class that gets added when a list should be able

// to be collapsed but isn't necessarily collpased.

collapsibleClass: 'is-collapsible',


// Class to add to list items.

listItemClass: 'toc-list-item',


// How many heading levels should not be collpased.

// For example, number 6 will show everything since

// there are only 6 heading levels and number 0 will collpase them all.

// The sections that are hidden will open

// and close as you scroll to headings within them.

collapseDepth: 0,


// Smooth scrolling enabled.

scrollSmooth: true,


// Smooth scroll duration.

scrollSmoothDuration: 420,


// Callback for scroll end.

scrollEndCallback: function (e) { },


// Headings offset between the headings and the top of the document (this is meant for minor adjustments).

headingsOffset: 1,


// Timeout between events firing to make sure it's

// not too rapid (for performance reasons).

throttleTimeout: 50,


// Element to add the positionFixedClass to.

positionFixedSelector: null,


// Fixed position class to add to make sidebar fixed after scrolling

// down past the fixedSidebarOffset.

positionFixedClass: 'is-position-fixed',


// fixedSidebarOffset can be any number but by default is set

// to auto which sets the fixedSidebarOffset to the sidebar

// element's offsetTop from the top of the document on init.

fixedSidebarOffset: 'auto',


// includeHtml can be set to true to include the HTML markup from the

// heading node instead of just including the textContent.

includeHtml: false,


// onclick function to apply to all links in toc. will be called with

// the event as the first parameter, and this can be used to stop,

// propagation, prevent default or perform action

onClick: false


});

Refresca el Tocbot.

tocbot.refresh()

Destruye el Tocbot y elimina la tabla de contenido de DOM.

tocbot.destroy()