Miten automaattisesti luotu HTML-korttipaikkojen sisältö
Sisällysluettelo voi parantaa huomattavasti monien verkkosivustojen käyttökokemusta dokumentointisivustot tai online-tietosanakirjat kuten Wikipedia. Hyvin suunniteltu sisällysluettelo antaa yleiskuvan sivusta ja auttaa käyttäjiä nopeasti navigoimaan kiinnostuneeseen osaan.
Perinteisesti voit luoda sisällysluettelon joko HTML: ssä tai JavaScriptissä, mutta viime aikoina standardoidut HTML-korttipaikat tarjoavat a keskellä. HTML-paikka on web-standardi, jonka avulla voit lisää paikkamerkkejä verkkosivulle ja myöhemmin täytä se dynaamisesti.
Milloin käyttää
Voit sijoittaa
Tämän tekniikan avulla luodaan sisällön taulukon HTML-lähdekoodi manuaalisesti. JavaScript luo vain sisällön sisällön automaattisesti, sivun otsikoihin tai alanimikkeisiin.
Jos et halua sisällyttää sisältöäsi HTML-koodiin, jota tarvitset luoda sekä asettelun että sisällön JavaScriptin avulla.
1. Luo HTML
TOC: n HTML-lähdekoodi (sisällysluettelo) tulee olemaan sisällä tag. Koodi sisällä ei saa renderöityä, ennen kuin se lisätään dokumenttiin JavaScriptin avulla. TOC: llä on paikkamerkit, pidetty sisällä
nimi kunkin ominaisuuden aukko määritteessä olevista vastaavista nimikkeistä ja alanimikkeistä.
Alla näet a näyte HTML Velociraptor (latinankielinen "nopea seizer") on… Velociraptor oli keskikokoinen dromaeosaurid, jossa aikuiset… Dromaeosauridien fossiilit ovat primitiivisempiä kuin… Amerikan luonnonhistoriallisen museon retkikunnan aikana… Velociraptor kuuluu Eudromaeosaurian ryhmään, joka on johdettu ... Vuonna 1971 löydetty "Taistelu dinosaurusten" -näytteellä säilytetään… Vuonna 2010 Hone ja kollegat julkaisivat paperin… Velociraptor oli jonkin verran lämminverinen, koska se vaati… Yksi Velociratoptor mongoliensis kallo on kaksi rinnakkaista… Kuten näet, jokainen otsikko on ainutlaatuinen Ja tässä on TOC: n HTML-koodi, sisällä Edellä mainituissa kahdessa koodipuristuksessa huomaa vastaavat Ennen kuin tarkastelet JavaScript-koodia, joka lisää TOC: n Varmista, että Nyt lisäämme komentosarjan lisää TOC: n yläpuolelle Yllä oleva koodinpätkä luo kopion Sitten kloonattu Jos palauttaisimme CSS-laskurin Tässä on lähdön kuvakaappaus: Jos haluat liittää TOC-nimikkeet niiden otsikoihin ja alanimikkeisiin lisäämällä Velociraptor (latinankielinen "nopea seizer") on… Velociraptor oli keskikokoinen dromaeosaurid, jossa aikuiset… Dromaeosauridien fossiilit ovat primitiivisempiä kuin… Kuten edellä näet, Ja Sisällysluettelon sisällä olevat nimikkeet on ankkuroitu: Ylimääräisessä ylälinjassa kaikki Katso kuvakaappausta linkitetty sisällysluettelo alla: Voit tarkistaa, ladata tai haarata tässä viestissä käytetyn koodin Github Reposta. joidenkin otsakkeiden ja alanimikkeiden kanssa.
Kuvaus
Höyhenet
Löytöhistoria
Luokitus
Paleobiology
Kosteuttava käyttäytyminen
aineenvaihdunta
Patologia
aukko arvo. tag.
aukko ja nimi määritteet otsikoissa ja 2. Numeroi otsikot
dokumenttiin lisää sarakkeiden numerot CSS-laskurien avulla. artikkeli counter-reset: otsikko; artikkeli h2 :: ennen counter-increment: otsikko; sisältö: '0'counter (otsikko)': ';
counter-reset sääntö kuuluu elementtiin, joka on kaikki otsikot, jotka kantavat aukko ominaisuus (kumpi on osa koodissamme).3. Aseta TOC asiakirjaan
tag, sisällä kontti. templateContent = document.querySelector ('malli'). article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc'). AppendChild (artikkeli); ja kiinnittää siihen Shadow DOM -puun. Me myös lisää kopio sisällön tähän Shadow DOM -puuhun. lisätään elementti on nyt myös TOC: ssä, kuitenkin vain sen otsikot ja alanimikkeet, jotka löysivät paikanvaraajan TOC: n sisällä, ovat näkyvissä. ruumis tai html elementin sijasta artikla, laskuri olisi laskenut myös luettelon otsikoista TOC: n sisällä. Siksi sinun pitäisi nollaa laskurit otsikoiden välittömässä vanhemmassa.
4. Lisää hyperlinkkejä
id otsikoihin ja ankkuroi niiden vastaava TOC-teksti poista toistuva id arvot kloonatuista artikla.
Kuvaus
Höyhenet
id määrite on lisätään jokaiseen artikkelin otsikkoon ja alanimikkeeseen.
id määritteet ovat poistetaan kloonatusta tuotteesta ennen Shadow DOM-puun liittäminen siihen. templateContent = document.querySelector ('malli'). article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') .EE ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true )); document.querySelector ( '# toc'). AppendChild (artikkeli); 
Github-demo
