Kako automatski generirati tablicu sadržaja s HTML slotovima
Sadržaj može znatno poboljšati korisničko iskustvo mnogih web-lokacija, na primjer dokumentacijske stranice ili online enciklopedije poput Wikipedije. Dobro osmišljen sadržaj daje pregled stranice i pomaže korisnicima da se brzo prebace u odjeljak koji ih zanima.
Tradicionalno možete stvoriti tablicu sadržaja u HTML-u ili JavaScriptu, ali u zadnje vrijeme standardizirani HTML slotovi pružaju a srednji put između njih dvoje. HTML utor je web standard koji vam omogućuje dodavanje rezerviranih mjesta web stranici i kasnije ispunite ga sadržajem dinamički.
Kada koristiti
Možete smjestiti
S ovom tehnikom trebate ručno stvoriti HTML izvorni kod tablice sadržaja. JavaScript samo automatski generira tekstualni sadržaj sadržaja, na temelju naslova ili podnaslova na stranici.
Ako ne želite da sadržaj bude prisutan u HTML-u koji trebate generirati izgled i sadržaj s JavaScriptom.
1. Izradite HTML
Izvorni HTML kôd za sadržaj (sadržaj) unutar a označiti. Kod unutra ne prikazuje se dok se ne doda u dokument pomoću JavaScripta. Naš TOC će imati rezerviranih mjesta, održan u
Ime atribut svakog od njih prorez u odgovarajućim naslovima i podnaslovima dokumenta.
U nastavku možete vidjeti a uzorak HTML-a Velociraptor (što znači "brzi seizer" na latinskom) je… Velociraptor je bio dromaeosaurid srednje veličine, s odraslima ... Fosili dromaeosaurida primitivniji od ... Tijekom ekspedicije Američkog muzeja prirodne povijesti ... Velociraptor je član skupine Eudromaeosauria, izvedene podskupine… Uzorak "Borbeni dinosauri", pronađen 1971. godine, čuva ... Godine 2010. Hone i njegovi kolege objavili su rad o ... Velociraptor je donekle bio toplokrvan, jer je zahtijevao ... Jedna lubanja Velociratoptor mongoliensis nosi dvije paralele ... Kao što možete vidjeti, svaki je naslov dano jedinstveno I ovdje je HTML kod TOC-a, unutar a U dva odlomka koda iznad, primijetite odgovarajući Prije nego što pogledate u JavaScript kôd koji će dodati TOC iz Uvjerite se da Sada dodajemo skriptu umeće TOC iznad Gornji dio isječka koda stvara kopiju Zatim, klonirani Ako bismo resetirali CSS brojač na Slijedi snimak zaslona: Ako želiš povezati TOC naslove s njihovim naslovima i podnaslovima dodavanjem Velociraptor (što znači "brzi seizer" na latinskom) je… Velociraptor je bio dromaeosaurid srednje veličine, s odraslima ... Fosili dromaeosaurida primitivniji od ... Kao što možete vidjeti gore, I, naslovi unutar tablice sadržaja su usidreni: U dodatnoj liniji iznad, sve Pogledajte sliku zaslona povezane tablice sadržaja ispod: Možete pogledati, preuzeti ili raširiti kod koji se koristi u ovom postu iz našeg Github Repo-a. s nekim naslovima i podnaslovima.
Opis
perje
Povijest otkrića
Klasifikacija
Paleobiology
Ponašanje čišćenja
Metabolizam
Patologija
prorez vrijednost. označiti.
prorez i Ime atributi unutar zaglavlja i 2. Označite naslove
na dokument dodajte serijske brojeve za naslove pomoću CSS brojača. članak counter-reset: zaglavlje; članak h2 :: prije counter-increment: zaglavlje; sadržaj: '0' brojač (naslov) ':';
protu-reset Pravilo pripada elementu koji je neposredni roditelj svih naslova koji nose naslov prorez atribut (koje je element u našem kodu).3. Umetnite sadržaj u dokument
označiti, unutar kontejner. templateContent = document.querySelector ('predložak'). sadržaj; article = document.querySelector ('članak'). cloneNode (true); article.attachShadow (način: 'zatvoren'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (članak). i dodaje stablo DOM-a sjene. Mi također dodajte kopiju sadržaja na ovo drvo Shadow DOM-a. je umetnut u element je sada je prisutan iu TOC-u, vidljivi su samo njegovi naslovi i podnaslovi koji su pronašli rezervirano mjesto unutar sadržaja. tijelo ili hTML umjesto elementa članak, brojač bi također brojio popis naslova unutar TOC-a. Zato bi i trebao resetirajte brojače na neposrednog roditelja zaglavlja.
4. Dodajte hiperveze
iskaznica na zaglavlja i pričvrstite odgovarajući TOC tekst koji ćete morati uklonite ponavljajuće iskaznica vrijednosti iz kloniranog članak.
Opis
perje
iskaznica atribut je dodan u svaki naslov i podnaslov članka.
iskaznica atributi su uklonjen iz kloniranog članka prije povezivanje stabla Shadow DOM-a s njim. templateContent = document.querySelector ('predložak'). sadržaj; article = document.querySelector ('članak'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (način: 'zatvoren'). appendChild (templateContent.cloneNode (true) )); document.querySelector ( '# toc') appendChild (članak). 
Github demo
