Cómo añadir una tabla de contenidos en sitios Ghost
El contenido de larga lectura ('long-form') requiere una configuración extra de la interfaz de usuario para ayudar a una navegacion rápida
Una tabla de contenidos es una lista de enlaces (que se muestra arriba o al lado del contenido) donde al clicar lleva a una sección titulada dentro de la página. Vamos a generar una tabla de contenidos automáticamente.
Prerrequisitos
Este tutorial muestra cómo añadir la tabla de contenidos a cada post a través de la administración de Ghost. La implementación total requiere editar el tema de Ghost.
Ver Handlebars theme documentation.
Añadir la librería
Esta pequeña librería llamada ‘Tocbot’ genera una tabla de contenidos a partir de los titulares de la página.
Añadimos al sitio Ghost a través de la sección Code Injection. En "Site Header" ponemos el código suministrado como link tag y en Site Footer, el script tag.
<!-- link tag -->
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.css>" />
<!-- script tag -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js>"></script>
Guardar pulsando en Save y comprobar que el nuevo código se ha incluido.
Mostrando la tabla de contenidos
La librería de la tabla se ha añadido, pero hace falta activarla. Añade el siguiente código debajo del script tag de Tocbot, en el Site Footer del área Code injection:
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
hasInnerContainers: true
});
</script>
La parte .post-content es el selector que muestra el contenido del post en el sitio Ghost. En Casper el archivo a modificar es .post-content En el caso de mi tema (headline) es gh-content
Hay que ver la estructura HTML para localizar el elemento que inmediatamente muestra el contenido principal. Se trata de localizar los titulares internos; así, yo lo encontré buscando los <h2> y ahí, en un nivel superior, vemos el tag de contenido en el que se integra el texto del post.
Este ejemplo es del HTML de Casper:
Una vez añadido el script con su selector adecuado, guardamos clicando en Save en la parte derecha de arriba en la vista de Settings > Code injection.
El otro selector del script que acabamos de añadir, .toc, es el elemento donde queremos que se visualice la tabla de contenidos. Navegamos al post en Ghost que queramos “mapear” y creamos una nueva tarjeta HTML en donde queremos que aparezca el mapa de contenidos.
La tarjeta (HTML card) se añade pulsando el botón “+” o bien escribiendo “/HTML” y retorno:
Dentro de la tarjeta HTML añadimos este código:
<aside class="toc"></aside>
Guardamos y vemos el post. El elemento añadido a la página contendrá ahora una tabla de contenidos creada a partir de todos los titulares del post. 🙌
Referencia
