Kaip automatiškai sukurti HTML turinio turinį
Turinys gali daug pagerinti, pavyzdžiui, daugelio svetainių naudotojų patirtį dokumentacijos svetaines arba internetiniai enciklopedijos kaip Vikipedija. Gerai suplanuotas turinys pateikia puslapio apžvalgą ir padeda naudotojams greitai pereiti prie dominančio skyriaus.
Tradiciškai galite sukurti turinį HTML arba „JavaScript“, tačiau pastaruoju metu standartizuoti HTML laiko tarpsniai suteikia a viduryje tarp dviejų. HTML lizdas yra žiniatinklio standartas, leidžiantis jums pridėti svetainės lankytojus ir vėliau dinamiškai užpildykite ją turiniu.
Kada naudoti
Galite įdėti
Naudodami šį metodą, turite sukurti turinio lentelės HTML kodą rankiniu būdu. „JavaScript“ automatiškai generuoja turinio turinį, pagal antraštes ar subpozicijas puslapyje.
Jei nenorite, kad turinys būtų rodomas HTML, kurį reikia kurti ir išdėstymą, ir turinį su „JavaScript“.
1. Sukurkite HTML
Bus pateiktas HTML šaltinio kodas TOC (turinys) viduje žyma. Kodas viduje negauna, kol „JavaScript“ pridės dokumentą. Mūsų TOC turės vietos žymenys, laikomas
The vardas kiekvieno atributas lizdą atributą atitinkamose dokumento antraštėse ir subpozicijose.
Žemiau galite matyti a mėginio HTML Velociraptor (tai reiškia, kad lotynų kalba yra „greitas sulaikymas“) yra… Velociraptor buvo vidutinio dydžio dromaeosauridas su suaugusiais ... Dromaeosauridų fosilijos yra primityvesnės nei… Amerikos gamtos istorijos muziejaus ekspedicijos metu ... Velociraptor yra grupės „Eudromaeosauria“, išvestinės grupės ... "Kovos su dinozaurais" pavyzdys, rastas 1971 m. 2010 m. Hone ir kolegos paskelbė ... Velociraptor buvo tam tikru laipsniu šiltakrauju, nes jis reikalavo… Vienas Velociratoptor mongoliensis kaukolė turi du lygiagrečiai ... Kaip matote, kiekviena antraštė yra suteiktas unikalus Ir čia yra TOC HTML kodas, viduje Pirmiau pateiktuose dviejuose kodų fragmentuose pastebėkite atitikimas Prieš žvelgdami į JavaScript kodą, kuris pridės TOC iš Įsitikinkite, kad Dabar pridedame scenarijų įterpia TOC virš Kodo fragmentas aukščiau sukuria kopiją Tada klonuotas Jei mes iš naujo nustatytume CSS skaitiklį Čia yra išvesties ekrano kopija: Jeigu nori susieti TOC pavadinimus su jų atitinkamomis antraštėmis ir subpozicijomis pridedant Velociraptor (tai reiškia, kad lotynų kalba yra „greitas sulaikymas“) yra… Velociraptor buvo vidutinio dydžio dromaeosauridas su suaugusiais ... Dromaeosauridų fosilijos yra primityvesnės nei… Kaip matote aukščiau, Ir Turinio lentelės viduje esantys pavadinimai yra pritvirtinti: Aukščiau esančioje papildomoje eilutėje visi Žr susietas turinys žemiau: Galite patikrinti, parsisiųsti arba iškabinti kodą, naudojamą šiame pranešime, iš mūsų „Github Repo“. su kai kuriomis pozicijomis ir subpozicijomis. The
apibūdinimas
Plunksnos
Atradimo istorija
klasifikacija
Paleobiologija
Nuodugnus elgesys
Metabolizmas
Patologija
lizdą vertė. žyma.
lizdą ir vardas atributai antraštėse ir 2. Nurodykite antraštes
prie dokumento naudodami CSS skaitiklius pridėkite antraščių serijos numerius. straipsnis counter-reset: title; straipsnis h2 :: prieš counter-increment: rubrika; turinys: „0“ skaitiklis (antraštė) „:“;
priešinis atstatymas taisyklė priklauso elementui, kuris yra visų tėvų, turinčių lizdą atributas (kuris yra elementas mūsų kode).3. Įdėkite TOC į dokumentą
žyma, viduje konteinerį. templateContent = document.querySelector („šablonas“). article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (article); ir prideda „Shadow DOM Tree“. Mes taip pat pridėkite kopiją turinio į šį šešėlių DOM medį. įterpiamas į elementas yra taip pat yra TOC, tačiau yra matomos tik jos antraštės ir subpozicijos, kuriose nustatyta, kad TOC yra vietovė. kūnas arba html elementas vietoj straipsnis, skaitiklis taip pat būtų įtraukęs į sąrašą TOC. Štai kodėl turėtumėte iš naujo nustatykite skaitiklius artimiausioje antraštėje.
4. Pridėkite hipersaitus
ID į antraštes ir jų atitinkamą TOC tekstą pašalinti pasikartojančius ID klonuotos vertės straipsnis.
apibūdinimas
Plunksnos
ID atributas yra pridedama prie kiekvienos straipsnio antraštės ir subpozicijos.
ID atributai yra iš klonuoto gaminio anksčiau „Shadow DOM“ medžio prijungimas prie jo. templateContent = document.querySelector („šablonas“). article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') .EI ((ele) => ele.removeAttribute ('id')) article.attachShadow (režimas: „uždarytas“). appendChild (templateContent.cloneNode (true )); document.querySelector ('# toc'). appendChild (article); 
„Github“ demo
