Sådan genereres automatisk indholdsfortegnelse med HTML-slots
Indholdsfortegnelse kan i høj grad forbedre brugeroplevelsen på mange websteder dokumentationswebsteder eller online encyclopedias som Wikipedia. En velindrettet indholdsfortegnelse giver et overblik over siden og hjælper brugere hurtigt at navigere til det afsnit, de er interesseret i.
Traditionelt kan du oprette indholdsfortegnelsen enten i HTML eller med JavaScript, men de seneste standardiserede HTML-slots giver en mellemvejs mellem de to. HTML Slot er en webstandard, der giver dig mulighed for tilføj pladsholdere til en webside og senere Fyld det med indhold dynamisk.
Hvornår skal du bruge
Du kan placere
Med denne teknik skal du manuelt oprette HTML-kildekoden i indholdsfortegnelsen. Kun JavaScript genererer automatisk indholdsfortegnelsen i indholdsfortegnelsen, baseret på overskrifter eller underpositioner på siden.
Hvis du ikke vil have indholdsfortegnelse for at være til stede i HTML'en, skal du generere både layout og indhold med JavaScript.
1. Opret HTML'en
HTML-kildekoden for TOC (indholdsfortegnelse) vil være inde i a tag. Koden inde bliver ikke gengivet, før den er tilføjet til dokumentet med JavaScript. Vores TOC vil have pladsholdere, holdt inde
Det navn attribut af hver slot attribut i deres tilsvarende overskrifter og underpositioner i dokumentet.
Nedenfor kan du se en prøve HTML Velociraptor (betyder "swift seizer" på latin) er en ... Velociraptor var en mellemstore dromaeosaurid, med voksne ... Fossiler af dromaeosaurider mere primitive end ... Under et amerikansk museum for naturhistorisk ekspedition ... Velociraptor er medlem af gruppen Eudromaeosauria, en afledt undergruppe af ... "Fighting Dinosaurs" -prøven, der blev fundet i 1971, bevarer en ... I 2010 offentliggjorde Hone og kolleger et dokument om ... Velociraptor var varmblodet i en vis grad, da det krævede en ... En Velociratoptor mongoliensis kranium bærer to parallelle ... Som du kan se, er hver overskrift givet en unik Og her er den HTML kode for TOC, inde i a I de to kodestykker ovenfor bemærker du matchning Før du kigger på JavaScript-koden, der vil tilføje TOC fra Sørg for at Nu tilføjer vi scriptet som indsætter TOC over Kodestykket ovenfor opretter en kopi af Så den klonede Hvis vi ville nulstille CSS-tælleren på Her er skærmbilledet af output: Hvis du vil link TOC titlerne til deres respektive overskrifter og underpositioner ved at tilføje Velociraptor (betyder "swift seizer" på latin) er en ... Velociraptor var en mellemstore dromaeosaurid, med voksne ... Fossiler af dromaeosaurider mere primitive end ... Som du kan se ovenfor, er Og titler inde i indholdsfortegnelsen er forankret: I den ekstra linje ovenfor, alle Se skærmbilledet af sammenhængende indholdsfortegnelse under: Du kan tjekke, downloade eller gaffel den kode, der bruges i dette indlæg fra vores Github Repo. med nogle overskrifter og underpositioner. Det
Beskrivelse
Fjer
Historie om opdagelse
Klassifikation
Paleobiology
Scavenging adfærd
Metabolisme
Patologi
slot værdi. tag.
slot og navn egenskaber inde i overskrifterne og 2. Tal på overskrifterne
til dokumentet, lad os Tilføj serienumre til overskrifterne ved hjælp af CSS-tællere. artikel mod-nulstilling: overskrift; artikel h2 :: før counter-increment: heading; indhold: '0'counter (overskrift)': ';
counter-reset Reglen tilhører det element, der er umiddelbar forælder for alle de titler, der bærer slot attribut (som er den element i vores kode).3. Indsæt TOC'en i dokumentet
tag, inde i beholder. templateContent = document.querySelector ('skabelon'). indhold; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'lukket'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (artikel).; og lægger et Shadow DOM-træ til det. Vi også tilføj en kopi af s indhold til dette Shadow DOM-træ. indsættes i element er nu også til stede i TOC, Men kun dens overskrifter og underpositioner, der fandt en pladsholder inde i TOC'en, er synlige. legeme eller html element i stedet for genstand, tælleren ville have talt listen over overskrifter inden for TOC også. Det er derfor du skal nulstiller tællerne ved den umiddelbare forælder til overskrifterne.
4. Tilføj hyperlinks
id til overskrifterne og forankre deres tilsvarende TOC-tekst, skal du fjern det gentagne id værdier fra den klonede genstand.
Beskrivelse
Fjer
id attributten er tilføjet til hver overskrift og underposition i artiklen.
id attributter er fjernet fra den klonede artikel Før vedhæftede Shadow DOM-træet til det. templateContent = document.querySelector ('skabelon'). indhold; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') .forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'lukket'). appendChild (templateContent.cloneNode )); document.querySelector ( '# toc') appendChild (artikel).; 
Github demo
