Slik genererer du automatisk generert innholdsfortegnelse med HTML-spor
Innholdsfortegnelse kan i stor grad forbedre brukeropplevelsen på mange nettsteder, for eksempel dokumentasjonssider eller elektroniske encyklopedier som Wikipedia. En godt utformet innholdsfortegnelse gir en oversikt over siden og hjelper brukerne raskt å navigere til delen de er interessert i.
Tradisjonelt kan du lage innholdsfortegnelse enten i HTML eller med JavaScript, men de nylig standardiserte HTML-sporene gir en midtvei mellom de to. HTML-spor er en webstandard som lar deg legg til plassholdere på en nettside og senere fyll det med innhold dynamisk.
Når skal du bruke
Du kan plassere
Med denne teknikken må du opprette HTML-kildekoden i innholdsfortegnelsen manuelt. JavaScript bare genererer automatisk innholdet i innholdsfortegnelsen, basert på overskriftene eller underposisjonene på siden.
Hvis du ikke vil ha innholdsfortegnelse for å være til stede i HTML-koden, må du generere både layout og innhold med JavaScript.
1. Lag HTML
HTML kildekoden for TOC (innholdsfortegnelse) vil være inne i a stikkord. Koden inne blir ikke gjengitt før den er lagt til i dokumentet med JavaScript. Vårt TOC vil ha plassholdere, holdt inne
De Navn attributt av hver slot Tilordne i tilhørende overskrifter og underposisjoner i dokumentet.
Nedenfor kan du se en prøve HTML Velociraptor (som betyr "swift seizer" på latin) er en ... Velociraptor var en mellomstor dromaeosaurid, med voksne ... Fossiler av dromaeosaurider mer primitiv enn ... Under et amerikansk museum for naturhistorisk ekspedisjon ... Velociraptor er medlem av gruppen Eudromaeosauria, en avledet undergruppe av ... "Fighting Dinosaurs" -prøven, funnet i 1971, bevarer en ... I 2010 publiserte Hone og kollegaer et papir på ... Velociraptor var varmblodig i noen grad, da det krevde en ... En Velociratoptor mongoliensis skalle bærer to parallelle ... Som du ser, er hver overskrift gitt en unik Og her er det HTML kode for TOC, inne i a I de to kodestykket ovenfor, legg merke til matchende Før du ser på JavaScript-koden som vil legge til TOC fra Pass på at Nå legger vi til skriptet som setter inn TOC over Kodestykket over lager en kopi av Så klonet Hvis vi ville tilbakestille CSS-telleren på Her er skjermbildet av utgangen: Hvis du vil lenke TOC-titlene til deres respektive overskrifter og underposisjoner ved å legge til Velociraptor (som betyr "swift seizer" på latin) er en ... Velociraptor var en mellomstor dromaeosaurid, med voksne ... Fossiler av dromaeosaurider mer primitiv enn ... Som du kan se over, er det Og titler inni innholdsfortegnelsen er forankret: I den ekstra linjen over, alt Se skjermbildet av koblet innholdsfortegnelse under: Du kan sjekke ut, laste ned eller gaffel koden som brukes i dette innlegget fra vår Github Repo. med noen overskrifter og underposisjoner. De
Beskrivelse
fjær
Oppdagelseshistorie
Klassifisering
Paleobiology
Avvikende oppførsel
metabolisme
Patologi
slot verdi. stikkord.
slot og Navn egenskaper innenfor overskriftene og 2. Nummer overskriftene
til dokumentet, la oss Legg til serienumre for overskriftene, ved hjelp av CSS-tellere. artikkel counter-reset: heading; artikkel h2 :: før counter-increment: heading; innhold: '0'counter (heading)': ';
teller for tilbakestilling Regelen tilhører elementet som er umiddelbar forelder for alle titlene som bærer slot Egenskap (hvilken er den element i vår kode).3. Sett inn TOC i dokumentet
stikkord, inne i container. templateContent = document.querySelector ('mal'). innhold; artikkel = document.querySelector ('article'). cloneNode (true); article.attachShadow (modus: 'lukket'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (artikkel).; og Føyer et Shadow DOM-tre til det. Vi også legg til en kopi av innhold til dette Shadow DOM-treet. er satt inn i elementet er nå til stede i TOC også, Men bare overskriftene og underposisjonene som fant en plassholder inne i TOC, er synlige. kropp eller html element i stedet for artikkel, telleren hadde telt listen over overskrifter i TOC også. Det er derfor du burde tilbakestill tellerne på den nærmeste overordnet av overskriftene.
4. Legg til hyperkoblinger
id til overskriftene og forankre deres tilsvarende TOC-tekst, må du fjern det repeterende id verdier fra klonet artikkel.
Beskrivelse
fjær
id attributtet er lagt til hver overskrift og underposisjon i artikkelen.
id attributter er fjernet fra den klonede artikkelen før Føyer Shadow DOM-treet til det. templateContent = document.querySelector ('mal'). innhold; artikkel = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id' '). forEach ((ele) => ele.removeAttribute (' id ')) artikkel.attachShadow (modus:' lukket '). appendChild (templateContent.cloneNode )); document.querySelector ( '# toc') appendChild (artikkel).; 
Github demo
