Kuidas automaatselt genereerida HTML-piludega sisukord
Sisukord võib näiteks oluliselt parandada paljude veebisaitide kasutuskogemust dokumentatsiooni saidid või online-entsüklopeediad nagu Wikipedia. Hästi kujundatud sisukord annab ülevaate leheküljest ja aitab kasutajatel kiiresti navigeerida huvipakkuvasse sektsiooni.
Traditsiooniliselt saate luua sisukorda kas HTML-is või JavaScripti abil, kuid viimased standardiseeritud HTML-i pesad pakuvad a kahe tee vahel. HTML Slot on veebistandard, mis võimaldab teil lisage veebisaidile kohahoidjaid ja hiljem täitke see dünaamiliselt sisuga.
Millal kasutada
Võite paigutada
Selle tehnikaga peate koostama sisukorra HTML-lähtekoodi käsitsi. JavaScript genereerib ainult sisukorra teksti sisu, põhinevad lehekülje rubriikidel või alamrubriikidel.
Kui te ei soovi, et sisu oleks vajalik HTML-is, mida vajate luua nii paigutus kui ka sisu JavaScripti abil.
1. Loo HTML
TOC (sisukord) HTML lähtekood on sees silt. Kood sees ei saa sulatatud, kuni see ei ole lisatud dokumendile JavaScript. Meie TOC-l on kohahoidjad, peetud
The nimi atribuut pesa atribuut dokumendi vastavatesse rubriikidesse ja alamrubriikidesse.
Allpool on näha proovi HTML-i Velociraptor (mis tähendab ladina keeles kiiret seiskrit) on… Velociraptor oli keskmise suurusega dromaeosaurid, täiskasvanutega… Dromaeosauriidide fossiilid on primitiivsemad kui… Ameerika loodusloomuuseumi ekspeditsiooni ajal… Velociraptor kuulub gruppi Eudromaeosauria, mis on tuletatud… 1971. aastal leitud "Võitlus dinosauruste" prooviga säilitab ... 2010. aastal avaldasid Hone ja kolleegid raamatu… Velociraptor oli mõnevõrra soojavereline, kuna see nõudis… Üks Velociratoptor mongoliensis kolju kannab kahte paralleelselt… Nagu näete, on iga pealkiri ainulaadne Ja siin on TOC HTML-kood, sees Ülaltoodud kahes koodilõigas märkige sobitamine Enne JavaScript-koodi vaatamist, mis lisab TOC-st Veenduge, et Nüüd lisame selle skripti lisab TOC ülalpool Ülaltoodud koodilõik loob koopia Siis klooniti Kui me CSS loenduri nullitakse Siin on väljundi pilt: Kui sa tahad siduda TOC-pealkirjad nende vastavate rubriikide ja alamrubriikidega lisades Velociraptor (mis tähendab ladina keeles kiiret seiskrit) on… Velociraptor oli keskmise suurusega dromaeosaurid, täiskasvanutega… Dromaeosauriidide fossiilid on primitiivsemad kui… Nagu näete eespool, on Ja sisukorras olevad pealkirjad on ankurdatud: Eespool toodud lisareas, kõik Vt seotud sisukord allpool: Meie postituses kasutatavat koodi saate vaadata meie Github Repo poolt. mõnede rubriikide ja alamrubriikidega. The
Kirjeldus
Suled
Avastamise ajalugu
Klassifikatsioon
Paleobioloogia
Puhastav käitumine
Metabolism
Patoloogia
pesa väärtus. silt.
pesa ja nimi atribuudid rubriikide sees ja 2. Märkige pealkirjad
dokumendile, let's lisage pealkirjade seerianumbrid, kasutades CSS-loendureid. artikkel counter-reset: rubriik; artikkel h2 :: enne counter-increment: rubriik; sisu: '0'counter (pealkiri)': ';
lähtestamine reegel kuulub elemendile, mis on kõigi nimede kandmise otsene vanem pesa atribuut (mis on element meie koodis).3. Sisestage TOC dokumenti
silt, sees konteiner. templateContent = document.querySelector ('malli') sisu; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artikkel); ja lisab sellele vari DOM puu. Meil ka lisage koopia sisu sellele Shadow DOM-i puule. sisestatakse element on ka TOC-s, siiski on nähtavad ainult selle rubriigid ja alamrubriigid, mis leidsid TOC-sse kohahoidja. keha või html elemendi asemel artikkel, loendur oleks loendanud ka TOC-i rubriikide nimekirja. Sellepärast peaksite lähtestage loendurid rubriikide vahetu vanema juures.
4. Lisage hüperlingid
id pealkirjadesse ja nende vastavate tekstide ankurdamine eemaldage korduv id kloonitud väärtused artikkel.
Kirjeldus
Suled
id atribuut on iga artikli rubriiki ja alamrubriiki.
id atribuudid on kloonitud artiklist eemaldatud enne Shadow DOM puu kinnitamine. templateContent = document.querySelector ('malli') sisu; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') .EE ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'suletud'.) appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (artikkel); 
Githubi demo
