Cómo generar automáticamente tablas de contenido con ranuras HTML
Tabla de contenido puede mejorar en gran medida la experiencia del usuario de muchos sitios web, por ejemplo sitios de documentación o enciclopedias en linea como la Wikipedia. Una tabla de contenido bien diseñada da una visión general de la página y ayuda a los usuarios a navegar rápidamente a la sección que les interesa..
Tradicionalmente, puede crear una tabla de contenido ya sea en HTML o con JavaScript, pero las ranuras HTML estandarizadas últimamente proporcionan una camino intermedio entre los dos. Ranura de HTML Es un estándar web que te permite agregar marcadores de posición a una página web y después llenalo dinamicamente de contenido.
Cuándo usar el
Puedes colocar
Con esta técnica, necesita crear el código fuente HTML de la tabla de contenido manualmente. JavaScript solo genera automáticamente el contenido de texto de la tabla de contenido, Basado en los encabezados o subtítulos de la página..
Si no desea que la tabla de contenido esté presente en el HTML, debe Genera tanto el diseño como el contenido con JavaScript..
1. Crea el HTML
El código fuente HTML para la tabla de contenido (TOC) será dentro de una etiqueta. El código dentro no se procesa hasta que JavaScript lo agregue al documento. Nuestro TOC tendrá marcadores de posición, Celebrado en
los nombre atributo de cada espacio atributo en sus encabezados y subtítulos correspondientes en el documento.
Abajo, puedes ver un muestra de HTML Velociraptor (que significa "swift seizer" en latín) es un ... Velociraptor era un dromaeosaurid de tamaño mediano, con adultos ... Fósiles de dromaeosauridos más primitivos que ... Durante una expedición del Museo Americano de Historia Natural ... Velociraptor es un miembro del grupo Eudromaeosauria, un subgrupo derivado de ... El espécimen "Fighting Dinosaurs", encontrado en 1971, conserva un ... En 2010, Hone y sus colegas publicaron un artículo sobre ... Velociraptor fue de sangre caliente hasta cierto punto, ya que requería un ... Un cráneo Velociratoptor mongoliensis lleva dos paralelos ... Como puedes ver, cada encabezado es dado un único Y, aquí está el Código HTML de la tabla de contenido, dentro de una En los dos fragmentos de código anteriores, observe la pareo Antes de mirar el código de JavaScript que agregará el TOC de la Asegúrese de que el Ahora, agregamos el script que inserta el TOC sobre el El fragmento de código de arriba crea una copia de Luego, lo clonado. Si restableciéramos el contador de CSS en la Aquí está la captura de pantalla de la salida: Si quieres vincular los títulos de TOC a sus respectivos encabezados y subtítulos añadiendo Velociraptor (que significa "swift seizer" en latín) es un ... Velociraptor era un dromaeosaurid de tamaño mediano, con adultos ... Fósiles de dromaeosauridos más primitivos que ... Como se puede ver arriba, el Y el Los títulos dentro de la tabla de contenidos están anclados.: En la línea adicional arriba, todos Vea la captura de pantalla del tabla de contenidos vinculada abajo: Puede revisar, descargar o bifurcar el código utilizado en esta publicación de nuestro Github Repo. con algunos encabezamientos y subtítulos. los
Descripción
Plumas
Historia del descubrimiento
Clasificación
Paleobiología
Comportamiento de barrido
Metabolismo
Patología
espacio valor. etiqueta.
espacio y nombre atributos dentro de los encabezados y el 2. Numera los encabezados
al documento, vamos agregue números de serie para los encabezados, usando contadores de CSS. artículo contrarrestar: encabezado; articulo h2 :: antes de contra-incremento: encabezado; contenido: '0'counter (header)': ';
contrarrestar La regla pertenece al elemento que es el padre inmediato de todos los títulos que llevan el espacio atributo (Cuál es el elemento en nuestro código).3. Inserte el TOC en el documento
etiqueta, dentro de envase. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artículo); y le adjunta un árbol DOM de sombra. Nosotros también añadir una copia de contenido a este árbol DOM de sombra. se inserta en el elemento es ahora presente en el TOC también, Sin embargo, solo son visibles los encabezados y subtítulos que encontraron un marcador de posición dentro de la TDC. cuerpo o html elemento en lugar de artículo, el contador también habría contado la lista de encabezados dentro del TOC. Por eso deberías restablecer los contadores en el padre inmediato de los encabezados.
4. Añadir hipervínculos
carné de identidad A los encabezados y al anclaje de su correspondiente texto TOC tendrá que quitar lo repetitivo carné de identidad valores de lo clonado artículo.
Descripción
Plumas
carné de identidad atributo es Agregado a cada encabezamiento y subtítulo en el artículo..
carné de identidad los atributos son eliminado del artículo clonado antes de adjuntando el árbol DOM de la sombra a ella. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (artículo); 
Demo de github
