Kā automātiski ģenerēt Satura rādītāju ar HTML laika nišām
Satura rādītājs var daudz uzlabot, piemēram, daudzu vietņu lietotāju pieredzi dokumentācijas vietnes vai tiešsaistes enciklopēdijas kā Vikipēdija. Labi izstrādāts satura rādītājs sniedz pārskatu par lapu un palīdz lietotājiem ātri pārvietoties uz sadaļu, kuru viņi interesē.
Tradicionāli jūs varat izveidot satura rādītāju vai nu HTML, vai ar JavaScript, bet pēdējā laikā standartizētie HTML sloti nodrošina a vidusceļš starp abiem. HTML slots ir tīmekļa standarts, kas ļauj jums pievienot tīmekļa vietnes vietniekus un vēlāk aizpildiet to ar dinamisku saturu.
Kad lietot
Jūs varat ievietot
Izmantojot šo metodi, jums jāveido satura tabulas HTML pirmkods manuāli. JavaScript tikai automātiski ģenerē satura satura teksta saturu, pamatojoties uz virsrakstiem vai apakšpozīcijām lapā.
Ja nevēlaties, lai saturs būtu pieejams HTML, kas jums nepieciešams ģenerēt gan izkārtojumu, gan saturu ar JavaScript.
1. Izveidojiet HTML
Tiks ievietots TOC HTML satura kods (satura rādītājs) iekšpusē a tag. Kods iekšā netiek saņemts, kamēr tas nav pievienots dokumentam ar JavaScript. Mūsu TOC būs vietnieki, notika
The nosaukums katra atribūta slots atribūts attiecīgajās dokumenta pozīcijās un apakšpozīcijās.
Zemāk jūs varat redzēt a HTML paraugs Velociraptor (tas nozīmē, ka latīņu valodā ir ātrs uztvērējs) ir… Velociraptor bija vidēja lieluma dromaeosaurid, ar pieaugušajiem ... Dromaeosaurīdu fosilijas ir primitīvākas nekā… Amerikas dabas vēstures muzeja ekspedīcijas laikā ... Velociraptor ir grupas Eudromaeosauria, kas ir atvasināta apakšgrupa, biedrs. "Cīņas dinozauru" paraugs, kas atrasts 1971. gadā, saglabā ... 2010. gadā Hone un kolēģi publicēja rakstu par… Velociraptor bija zināmā mērā silts asinis, jo tas bija nepieciešams… Vienam Velociratoptor mongoliensis galvam ir divas paralēlas… Kā redzat, katra pozīcija ir piešķirts unikāls Un šeit ir TOC HTML kods, iekšpusē a Divos iepriekšminētajos koda fragmentos pamaniet saskaņošana Pirms meklējat JavaScript kodu, kas pievienos TOC no Pārliecinieties, ka Tagad mēs pievienojam skriptu ievieto TOC virs Iepriekš minētais koda fragments izveido kopiju Tad klonēts Ja mēs atiestatītu CSS skaitītāju Šeit ir attēla attēls: Ja Tu gribi sasaistīt TOC nosaukumus ar to attiecīgajām pozīcijām un apakšpozīcijām pievienojot Velociraptor (tas nozīmē, ka latīņu valodā ir ātrs uztvērējs) ir… Velociraptor bija vidēja lieluma dromaeosaurid, ar pieaugušajiem ... Dromaeosaurīdu fosilijas ir primitīvākas nekā… Kā redzams iepriekš, Un, nosaukumi satura tabulā ir nostiprināti: Iepriekš minētajā papildu rindā visi Skatiet attēla ekrānu saistīto satura rādītāju zemāk: Jūs varat pārbaudīt, lejupielādēt vai izvilkt šajā amatā izmantoto kodu no mūsu Github Repo. ar dažām pozīcijām un apakšpozīcijām. The
Apraksts
Spalvas
Atklāšanas vēsture
Klasifikācija
Paleobioloģija
Izturīga uzvedība
Vielmaiņa
Patoloģija
slots vērtību. tag.
slots un nosaukums atribūti iekšpusē virsraksti un 2. Norādiet pozīcijas
dokumentam, pieņemsim pievienojiet pozīciju sērijas numurus, izmantojot CSS skaitītājus. raksts counter-reset: pozīcija; raksts h2 :: pirms counter-increment: pozīcija; saturs: '0'counter (pozīcija)': ';
counter-reset noteikums pieder elementam, kas ir visu vecāku, kam ir slots atribūts (kas ir elements mūsu kodā).3. Ievietojiet TOC dokumentā
tag, iekšpusē konteiners. templateContent = document.querySelector ('veidne'). saturs; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (article); un pievieno tam ēnu DOM koku. Mēs arī pievienot kopiju saturs uz šo ēnu DOM koku. tiek ievietots elements ir tagad ir arī TOC, tomēr ir redzamas tikai tās virsraksti un apakšpozīcijas, kas atrada vietas rezervētāju TOC ietvaros. ķermeni vai html elementa vietā rakstu, skaitītājs būtu skaitījis arī pozīciju sarakstu TOC iekšienē. Tāpēc jums vajadzētu atiestatiet skaitītājus virsrakstu tiešajā vecumā.
4. Pievienojiet hipersaites
ID uz virsrakstiem un to atbilstošo TOC tekstu noņemiet atkārtojošo ID no klonētajām vērtībām rakstu.
Apraksts
Spalvas
ID atribūts ir katrai pozīcijas un apakšpozīcijai.
ID atribūti ir no klonēta raksta iepriekš Shadow DOM koka pievienošana tai. templateContent = document.querySelector ('veidne'). saturs; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') .EI ((ele) => ele.removeAttribute ('id')) article.attachShadow (režīms: aizvērts). )); document.querySelector ('# toc'). appendChild (article); 
Github demo
