Cum să generați automat conținutul cu sloturi HTML
Cuprins poate îmbunătăți considerabil experiența utilizatorilor de multe site-uri, de exemplu site-uri de documentare sau enciclopedii online cum ar fi Wikipedia. Un cuprins bine conceput oferă o prezentare generală a paginii și ajută utilizatorii să navigheze rapid la secțiunea în care sunt interesați.
În mod tradițional, puteți să creați cuprinsul fie în format HTML, fie cu JavaScript, dar sloturile HTML standardizate recent oferă o mijloc între cele două. Slot HTML este un standard web care vă permite să adăugați substituenți la o pagină Web Și mai târziu umpleți-l cu conținut dinamic.
Când să utilizați
Puteți plasa
Cu această tehnică, trebuie să creați manual codul sursă HTML al conținutului. JavaScript generează automat numai conținutul textului din cuprins, pe baza titlurilor sau subtitlurilor de pe pagină.
Dacă nu doriți ca tabela de conținut să fie prezentă în HTML, trebuie să faceți acest lucru generează atât aspectul cât și conținutul cu JavaScript.
1. Creați codul HTML
Codul sursă HTML pentru TOC (cuprinsul) va fi în interiorul a etichetă. Codul din interior nu este redat până când nu este adăugat la document prin JavaScript. Tocul nostru va avea substituenţi, a avut loc în
Nume atributul fiecăruia slot la titlurile și subtitlurile corespunzătoare din document.
Mai jos, puteți vedea a proba HTML Velociraptor (adică "seizer rapid" în latină) este un ... Velociraptor a fost un dromaeosaurid de dimensiuni medii, cu adulți ... Fosile de dromaeosauride mai primitive decât ... În timpul expediției unui muzeu american de istorie naturală ... Velociraptor este un membru al grupului Eudromaeosauria, un subgrup derivat din ... Specimenul "Dinozaurii de luptă", găsit în 1971, păstrează o ... În 2010, Hone și colegii săi au publicat un ... Velociraptor a fost cu sânge cald într-o anumită măsură, deoarece a necesitat ... Un craniu Velociratoptor mongoliensis poartă două paralele ... După cum puteți vedea, fiecare poziție este dat un unic Și, iată-l Codul HTML al TOC, în interiorul a În cele două fragmente de cod de mai sus, observați potrivire Înainte de a examina codul JavaScript care va adăuga conținutul TOC din Asigurați - vă că Acum, adăugăm scenariul introduce TOC deasupra Fragmentul de cod de mai sus creează o copie a Apoi, clonat Dacă am reseta contorul CSS la Iată screenshot-ul de ieșire: Dacă dorești legătura titlurilor TOC cu titlurile și subcapitolele respective prin adăugarea Velociraptor (adică "seizer rapid" în latină) este un ... Velociraptor a fost un dromaeosaurid de dimensiuni medii, cu adulți ... Fosile de dromaeosauride mai primitive decât ... După cum puteți vedea mai sus, Si titlurile din cuprins sunt ancorate: În linia extra de mai sus, toate Vedeți captura de ecran a cuprins cuprins de mai jos: Puteți verifica, descărca sau distribui codul utilizat în acest post de la Github Repo. cu unele titluri și subpoziții.
Descriere
pene
Istoria descoperirii
Clasificare
paleobiologie
Curățenie comportament
Metabolism
Patologie
slot valoare. etichetă.
slot și Nume atribute în interiorul titlurilor și 2. Numărul titlurilor
la document, să zicem adăugați numere de serie pentru titluri, utilizând contoare CSS. articol contra-reset: titlu; articolul h2 :: înainte de contra-increment: heading; conținut: '0'counter (heading)': ';
counter-reset regula aparține elementului care este părintele imediat al tuturor titlurilor care poartă slot atribut (care este element în codul nostru).3. Introduceți documentul în document
etichetă, în interiorul recipient. templateContent = document.querySelector ('template'). conținut; articolul = document.querySelector ("articolul") cloneNode (true); articol.attachShadow (mode: 'închis')) appendChild (templateContent.cloneNode (true)); document.querySelector ( '# COT') appendChild (articol).; și atașează un arbore DOM de umbră. Noi Deasemenea adăugați o copie a de conținut la acest arbore DOM-umbra. este inserat în element este prezent în prezent și în documentul de informare, însă sunt vizibile doar titlurile și subtitlurile care au găsit un substituent în interiorul TOC. corp sau html element în loc de articol, contorul ar fi luat în considerare și lista titlurilor din interiorul CTC. De aceea ar trebui resetați contoarele la părintele imediat al pozițiilor.
4. Adăugați hyperlink-uri
id la rubricile și ancorarea textului lor TOC corespunzător va trebui să eliminați repetarea id valori din clonat articol.
Descriere
pene
id este atributul adăugat la fiecare poziție și subpoziție din articol.
id atributele sunt eliminat din articolul clonat inainte de atașând copacul Shadow DOM la el. templateContent = document.querySelector ('template'). conținut; articolul = document.querySelector ("articolul") cloneNode (true); (mode: 'closed')) appendChild (templateContent.cloneNode (true) ()) )); document.querySelector ( '# COT') appendChild (articol).; 
Github demo
