Comment générer automatiquement une table des matières avec des emplacements HTML
Table des matières peut considérablement améliorer l'expérience utilisateur de nombreux sites Web, par exemple sites de documentation ou encyclopédies en ligne comme Wikipedia. Une table des matières bien conçue donne un aperçu de la page et aide les utilisateurs à accéder rapidement à la section qui les intéresse.
Traditionnellement, vous pouvez créer une table des matières en HTML ou en JavaScript, mais les emplacements HTML récemment normalisés fournissent une moyen chemin entre les deux. Emplacement HTML est un standard Web qui vous permet de ajouter des espaces réservés à une page Web et ensuite remplissez le contenu dynamiquement.
Quand utiliser le
Vous pouvez placer
Avec cette technique, vous devez créer manuellement le code source HTML de la table des matières. JavaScript ne génère que le contenu textuel de la table des matières, en fonction des titres ou des sous-titres de la page.
Si vous ne souhaitez pas que la table des matières soit présente dans le code HTML, vous devez générer à la fois la mise en page et le contenu avec JavaScript.
1. Créer le HTML
Le code source HTML de la table des matières (TOC) sera à l'intérieur d'un étiquette. Le code à l'intérieur ne sera pas rendu tant qu'il n'aura pas été ajouté au document par JavaScript. Notre COT aura espaces réservés, tenue dans
le prénom attribut de chaque fente attribuer dans leurs titres et sous-titres correspondants dans le document.
Ci-dessous, vous pouvez voir un exemple HTML Velociraptor (qui signifie "swift seizer" en latin) est un… Velociraptor était un dromaeosaurida de taille moyenne, avec des adultes… Des fossiles de dromaeosauridés plus primitifs que… Lors d'une expédition au Musée américain d'histoire naturelle… Velociraptor est un membre du groupe Eudromaeosauria, un sous-groupe dérivé de… Le spécimen "Fighting Dinosaurs", découvert en 1971, conserve un… En 2010, Hone et ses collègues ont publié un article sur… Velociraptor avait du sang chaud dans une certaine mesure, car il lui fallait un… Un crâne de Velociratoptor mongoliensis porte deux parallèles… Comme vous pouvez le constater, chaque rubrique est donné un unique Et voici le Code HTML de la table des matières, à l'intérieur d'un Dans les deux extraits de code ci-dessus, remarquez le correspondant à Avant de regarder dans le code JavaScript qui ajoutera la table des matières du Assurez-vous que le Maintenant, nous ajoutons le script qui insère la table des matières au-dessus de la L'extrait de code ci-dessus crée une copie de Ensuite, le cloné Si nous voulions réinitialiser le compteur CSS à la Voici la capture d'écran de la sortie: Si tu veux lier les titres de la table des matières à leurs titres et sous-titres respectifs en ajoutant Velociraptor (qui signifie "swift seizer" en latin) est un… Velociraptor était un dromaeosaurida de taille moyenne, avec des adultes… Des fossiles de dromaeosauridés plus primitifs que… Comme vous pouvez le voir ci-dessus, le Et le les titres dans la table des matières sont ancrés: Dans la ligne supplémentaire ci-dessus, tout Voir la capture d'écran du table des matières liée au dessous de: Vous pouvez consulter, télécharger ou insérer le code utilisé dans ce message depuis notre rapport Github.. avec quelques titres et sous-titres. le
La description
Plumes
Histoire de découverte
Classification
Paléobiologie
Comportement de récupération
Métabolisme
Pathologie
fente valeur. étiquette.
fente et prénom les attributs dans les rubriques et les 2. Numéroter les rubriques
au document, ajouter des numéros de série pour les en-têtes, en utilisant des compteurs CSS. article counter-reset: rubrique; article h2 :: before counter-increment: heading; contenu: '0' compteur (en-tête) ':';
remise à zéro règle appartient à l'élément qui est le parent immédiat de tous les titres portant le fente attribut (qui est le élément dans notre code).3. Insérer la table des matières dans le document
étiquette, à l'intérieur de récipient. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (article); et y attache un arbre DOM Shadow. Nous avons aussi ajouter une copie de le contenu à cet arbre DOM Shadow. est inséré dans le l'élément est maintenant présent dans le COT ainsi, toutefois, seuls les titres et sous-titres qui ont trouvé un espace réservé dans la table des matières sont visibles.. corps ou html élément au lieu de article, le compteur aurait également compté la liste des en-têtes à l'intérieur de la table des matières. C'est pourquoi tu devrais réinitialiser les compteurs au parent immédiat des en-têtes.
4. Ajouter des hyperliens
identifiant aux en-têtes et en ancrant le texte de la table des matières correspondant, vous devrez enlever le répétitif identifiant les valeurs du cloné article.
La description
Plumes
identifiant attribut est ajouté à chaque titre et sous-titre de l'article.
identifiant les attributs sont retiré de l'article cloné avant attacher l'arbre DOM Shadow à celui-ci. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'fermé'). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (article); 
Démo de Github
