Personalización de tabla de contenido: ¿Cómo lograrlo?

DuvanMX · 6 Sep 2022

Buenas noches, quisiera preguntarles como se personaliza una tabla de contenido.

Estaba navegando por la web y me encontré con un blog en donde la tabla de contenido era totalmente diferente a la que uno ve en cualquier sitio, algo así:

Títulos H2 del sitio:

Que es WhatsApp
Como funciona WhatsApp
Historia de WhatsApp
Que son los grupos de WhatsApp
Críticas de WhatsApp
Cuáles son los precios de WhatsApp
Actualizaciones de uso de WhatsApp

La tabla de contenido de ese artículo apareció así:

Que es WhatsApp
Funcionamiento
Historia
Grupos
Críticas
Precios
Actualizaciones

Hice un rastro y tiene un plugin llamado Table of Contents Plus, lo que no logro entender es como hicieron personalizar lo que muestra la tabla de contenido.

¿Alguien tiene idea de cómo hacer esto?

Cicklow · 6 Sep 2022

yo uso un plugin parecido "Easy Table of Contents", y lo hace solo. Le indicas como armar la tabla, en mi caso usa los H (h1, h2, etc) para armar la tabla. Dsp el resto es CSS (permite editar eso) para que quede como tu web

Paul Mujica · 6 Sep 2022

Las tablas eficientemente se deben crear así:

<H2>
<H3>
<H4>
<H2>
<H3>
<H2>

De manera que un ejemplo sería:

WhatsApp, ¿es buena herramienta de comunicación?

Historia de la app

Año 2005

Los competidores de WhatsApp

Telegram como alternativa

Algunas funciones

Y así creas sub-apartados en la tabla. Es posible que el plugin usado quite la palabra clave de la tabla índice y solo cree títulos hijos.

DuvanMX · 6 Sep 2022

Cicklow dijo:
yo uso un plugin parecido "Easy Table of Contents", y lo hace solo. Le indicas como armar la tabla, en mi caso usa los H (h1, h2, etc) para armar la tabla. Dsp el resto es CSS (permite editar eso) para que quede como tu web

Me ha servido muchísimo, por fin logré que la tabla de contenido se viera como yo quería 👏

Personalización de tabla de contenido: ¿Cómo lograrlo?

DuvanMX

Cicklow

Paul Mujica

WhatsApp, ¿es buena herramienta de comunicación?​

Historia de la app​

Los competidores de WhatsApp​

Telegram como alternativa​

Algunas funciones​