Kako samodejno ustvariti tabelo vsebine s sloti HTML
Kazalo lahko na primer zelo izboljša uporabniško izkušnjo številnih spletnih mest dokumentacijo ali spletne enciklopedije kot Wikipedija. Dobro oblikovana vsebina daje pregled strani in pomaga uporabnikom, da se hitro pomaknejo na razdelek, ki ga zanimajo.
Tradicionalno lahko ustvarite kazalo v HTML-ju ali z JavaScriptom, vendar zadnje standardizirane HTML-reže zagotavljajo a srednji poti med obema. Slot HTML je spletni standard, ki vam omogoča dodajte ograde na spletno stran in pozneje izpolnite ga z vsebino dinamično.
Kdaj uporabiti
Lahko postavite
S to tehniko morate ročno ustvariti izvorno kodo HTML kazala. JavaScript samo samodejno ustvari vsebino besedila kazala vsebine, na podlagi naslovov ali podnaslovov na strani.
Če ne želite, da je kazalo prisotno v HTML-ju, ki ga potrebujete ustvarite postavitev in vsebino z JavaScriptom.
1. Ustvarite HTML
Izvorna koda HTML za vsebino (kazalo vsebine) bo znotraj oznaka. Koda znotraj ne bo upodobljen, dokler ga ne doda JavaScript. Naš TOC bo imel ograde, držati notri
The ime atribut vsakega reža v ustreznih naslovih in podštevilkah dokumenta.
Spodaj si lahko ogledate a vzorčni HTML Velociraptor (v lat. Lat.) Je… Velociraptor je bil srednje velik dromaeosaurid, z odraslimi… Fosili dromaeosauridov so bolj primitivni od… Med ekspedicijo ameriškega naravoslovnega muzeja ... Velociraptor je član skupine Eudromaeosauria, izpeljane podskupine… Vzorec "Boj proti dinozavrom", najden leta 1971, ohranja ... Leta 2010 sta Hone in njegovi sodelavci objavili dokument o… Zdravilo Velociraptor je bilo do neke mere toplokrvno, ker je zahtevalo… Ena Velociratoptor mongoliensis lobanja ima dve vzporednici… Kot lahko vidite, je vsak naslov glede na edinstveno In tukaj je HTML koda TOC, znotraj V zgornjih dveh odlomkih kode opazite ujemanje Preden pogledate v JavaScript kodo, ki bo dodala TOC iz Poskrbite, da Sedaj dodamo skript vstavi TOC nad Zgornji odrezek kode ustvari kopijo Potem je kloniran Če bi ponastavili števec CSS na Sledi posnetek zaslona: Če želiš naslovi TOC na njihove naslove in podštevilke z dodajanjem Velociraptor (v lat. Lat.) Je… Velociraptor je bil srednje velik dromaeosaurid, z odraslimi… Fosili dromaeosauridov so bolj primitivni od… Kot lahko vidite zgoraj, In naslovi znotraj kazala vsebine so zasidrani: V dodatni vrstici zgoraj, vse Glej sliko zaslona povezano kazalo spodaj: Lahko si ogledate, prenesete ali razpečite kodo, uporabljeno v tem sporočilu, iz našega Github Repo. z nekaterimi naslovi in podštevilkami. The
Opis
Perje
Zgodovina odkrivanja
Razvrstitev
Paleobiologija
Obnašanje čiščenja
Presnova
Patologija
reža vrednost. oznaka.
reža in ime lastnosti znotraj naslovov in 2. Navedite številke
v dokumentu dodajte serijske številke za naslove z uporabo števcev CSS. članek counter-reset: naslov; članek h2 :: pred counter-increment: title; vsebina: '0' števec (naslov) ':';
ponastavitev pravilo pripada elementu, ki je neposrednih staršev vseh naslovov, ki nosijo reža atribut (kar je element v naši kodi).3. V dokument vstavite TOC
oznaka, znotraj posodo. templateContent = document.querySelector ('template'). vsebina; article = document.querySelector ("članek") cloneNode (true); article.attachShadow (način: 'zaprto'). appendChild (templateContent.cloneNode (true)); document.querySelector ("# toc"). appendChild (članek); in nanj pripne drevo DOM Shadow. Smo tudi dodajte kopijo vsebine na to drevo Shadow DOM. se vstavi v element je TOC, vendar so vidni samo njeni naslovi in podštevilke, ki so našle ogrado znotraj TOC. telo ali html namesto elementa članku, števec bi prav tako preštel seznam naslovov znotraj TOC. Zato bi moral ponastavite števce na neposredno nadrejeno glavo.
4. Dodajte hiperpovezave
id v naslove in sidranje ustreznega besedila TOC, ki ga boste morali odstranite ponavljajoče id vrednosti iz kloniranega članku.
Opis
Perje
id je atribut v vsak naslov in podštevilko članka.
id atributi iz kloniranega izdelka prej povezovanje drevesa Shadow DOM z njim. templateContent = document.querySelector ('template'). vsebina; article = document.querySelector ("članek") cloneNode (true); article.querySelectorAll ('* [id]')) zaEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (način: 'zaprto'). appendChild (templateContent.cloneNode (true) )); document.querySelector ("# toc"). appendChild (članek); 
Github demo
