Velociraptor (que significa "veloz seccionador" en latín) es un ...
Descripción
Velociraptor era un dromeosáurido mediano, con adultos ...
Plumas
Fósiles de dromeosáuridos más primitivos que ...
Historia de descubrimiento
Durante una expedición del Museo Americano de Historia Natural ...
Clasificación
Velociraptor es un miembro del grupo Eudromaeosauria, un subgrupo derivado de ...
Paleobiología
El espécimen "Fighting Dinosaurs", encontrado en 1971, conserva un ...
Comportamiento
En 2010, Hone y sus colegas publicaron un documento sobre ...
Metabolismo
Velociraptor era de sangre caliente hasta cierto punto, ya que requería un ...
Patología
Un cráneo Velociratoptor mongoliensis tiene dos paralelos ...
Como puede ver, a cada encabezado se le asigna un valor de slot único .
Y, aquí está el código HTML del TOC, dentro de un etiqueta.
En los dos fragmentos de código anteriores, observe la coincidencia de los atributos de slot y name dentro de los títulos y
2. Numere los encabezados
Antes de buscar en el código de JavaScript que agregará el TOC del al documento, agreguemos números de serie para los títulos, usando contadores CSS .
artículo {counter-reset: heading; } artículo h2 :: before {counter-increment: heading; contenido: '0'counter (encabezado)': '; } Asegúrese de que la regla de counter-reset pertenece al elemento que es el primario inmediato de todos los títulos que llevan el atributo de slot (que es el
3. Inserta el TOC en el documento
Ahora, agregamos el script que inserta el TOC sobre el
templateContent = document.querySelector ('template'). content; article = document.querySelector ('artículo'). cloneNode (true); article.attachShadow ({modo: 'cerrado'}). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artículo); El fragmento de código anterior crea una copia de
Entonces, el clonado Si restableciéramos el contador de CSS en el Aquí está la captura de pantalla de la salida: Si desea vincular los títulos de TOC a sus respectivos encabezados y subtítulos añadiendo Velociraptor (que significa "veloz seccionador" en latín) es un ... Velociraptor era un dromeosáurido mediano, con adultos ... Fósiles de dromeosáuridos más primitivos que ... Como puede ver arriba, el atributo Y, los títulos dentro de la tabla de contenido están anclados : En la línea adicional anterior, todos los atributos de Vea la captura de pantalla de la tabla de contenidos vinculada a continuación: Puede consultar, descargar o copiar el código utilizado en esta publicación de nuestro Github Repo. 30 plantillas gratis y hermosas de currículum para descargar Probablemente hayas visto los currículos llamativos y de aspecto profesional que los diseñadores web talentosos han estado diseñando y exhibiendo en línea. Si no lo has hecho, no es demasiado tarde para ver esta colección de currículos creativos.Hacer un currículum impresionantemente diseñado desde cero puede ser un desafío, especialmente si no tiene un diseño para ganarse la vida. Pero si Crea hermosas animaciones con esta biblioteca de Javascript Hay toneladas de bibliotecas de animación gratuitas, todas con diferentes efectos y especialidades. Pero la nueva biblioteca Particles.js toma una dirección totalmente nueva al crear partículas animadas que se mueven en tiempo real por toda la página.Esta biblioteca fácil de usar es completamente gratuita y de código abierto en GitHub. Cierbody o elemento html lugar de article, el contador también habría contado la lista de títulos dentro del TOC. Es por eso que debe restablecer los contadores en el padre inmediato de los títulos .
4. Agregue hipervínculos id a los encabezados y anclando su correspondiente texto de TOC, tendrá que eliminar los valores de id repetitivos del article clonado . Descripción
Plumas
id se agrega a cada encabezado y subtítulo en el artículo .id se eliminan del artículo clonado antes de adjuntar el árbol DOM de sombra. templateContent = document.querySelector ('template'). content; article = document.querySelector ('artículo'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => {ele.removeAttribute ('id')}) article.attachShadow ({mode: 'closed'}). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (artículo); 
Demostración de Github 
![¿Podría un mayor tiempo de vacaciones mejorar su productividad? [30 países comparados]](http://hideout-lastation.com/img/tech-design-tips/739/could-more-vacation-time-improve-your-productivity.jpg)
