Så här skapas automatiskt genererade innehållsförteckningar med HTML-slots
Innehållsförteckning kan till exempel förbättra användarupplevelsen på många webbplatser dokumentationssidor eller online-encyklopedi som Wikipedia. En väl utformad innehållsförteckning ger en översikt över sidan och hjälper användarna att snabbt navigera till det avsnitt de är intresserade av.
Traditionellt kan du skapa innehållsförteckning antingen i HTML eller med JavaScript, men de nyligen standardiserade HTML-slotsarna ger en mellanväg mellan de två. HTML Slot är en webbstandard som tillåter dig att lägg till platsinnehavare på en webbsida och senare fyll det med innehåll dynamiskt.
När ska man använda
Du kan placera
Med den här tekniken måste du skapa HTML-källkoden i innehållsförteckningen manuellt. JavaScript genererar bara textinnehållet i innehållsförteckningen, baserat på rubrikerna eller underrubrikerna på sidan.
Om du inte vill ha innehållsförteckning för att vara närvarande i HTML-filen måste du generera både layout och innehåll med JavaScript.
1. Skapa HTML
HTML-koden för TOC (innehållsförteckning) kommer att vara inuti a märka. Koden inuti får inte återges tills den läggs till i dokumentet med JavaScript. Vårt TOC kommer att ha platshållare, hölls i
De namn attribut av varje spår ange i motsvarande rubriker och underrubriker i dokumentet.
Nedan ser du en exempel HTML Velociraptor (betyder "swift seizer" på latin) är en ... Velociraptor var en medelstor dromaeosaurid, med vuxna ... Fossiler av dromaeosaurider är mer primitiva än ... Under ett amerikanskt museum för naturhistorisk expedition ... Velociraptor är medlem i gruppen Eudromaeosauria, en härledd undergrupp av ... "Fighting Dinosaurs" -provet, som hittades 1971, bevarar en ... Under 2010 publicerade Hone och kollegor ett dokument om ... Velociraptor var varmblodig i viss mån, eftersom det krävde en ... En Velociratoptor mongoliensis skalle har två parallella ... Som du kan se är varje rubrik givet en unik Och här är det HTML-kod för TOC, inuti a I de två kodraderna ovan märker du matchande Innan du tittar på JavaScript-koden som kommer att lägga till TOC från Se till att Nu lägger vi till skriptet som sätter in TOC ovanför Kodsnittet ovan skapar en kopia av Då klonades Om vi skulle återställa CSS-räknaren vid Här är skärmdumpen för utgången: Om du vill länka TOC-titlarna till deras respektive rubriker och underrubriker genom att lägga till Velociraptor (betyder "swift seizer" på latin) är en ... Velociraptor var en medelstor dromaeosaurid, med vuxna ... Fossiler av dromaeosaurider är mer primitiva än ... Som du kan se ovan, Och den Titlarna i innehållsförteckningen är förankrade: I den extra linjen ovan, alla Se skärmdumpen av länkad innehållsförteckning Nedan: Du kan kolla, ladda ner eller gaffel koden som används i det här inlägget från vår Github Repo. med några rubriker och underrubriker. De
Beskrivning
fjädrar
Historia av upptäckten
Klassificering
paleobiologi
Skavningsbeteende
Ämnesomsättning
Patologi
spår värde. märka.
spår och namn attribut inuti rubrikerna och 2. Nummer rubrikerna
till dokumentet, låt oss Lägg till serienumrar för rubrikerna, med hjälp av CSS-räknare. artikel counter-reset: heading; artikel h2 :: före counter-increment: heading; innehåll: '0'counter (heading)': ';
counter-reset regel hör till det element som är det omedelbar förälder till alla titlar som bär spår attribut (vilken är element i vår kod).3. Sätt in TOC i dokumentet
märka, inuti behållare. templateContent = document.querySelector ('mall'). innehåll; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector (# toc) appendChild (artikel). och fäster ett Shadow DOM-träd till det. Vi också lägg till en kopia av s innehåll till detta Shadow DOM-träd. sätts in i elementet är nu också närvarande i TOC, Men endast dess rubriker och underrubriker som hittade en platshållare inne i TOC är synliga. kropp eller html element istället för artikel, räknaren skulle ha räknat listan över rubriker inom TOC också. Det är därför du borde Återställ räknarna vid den omedelbara föräldern av rubrikerna.
4. Lägg till hyperlänkar
id till rubrikerna och förankra deras motsvarande TOC-text måste du ta bort det repeterande id värden från den klonade artikel.
Beskrivning
fjädrar
id attributet är läggas till i varje rubrik och underrubrik i artikeln.
id attribut är avlägsnas från den klonade artikeln innan bifogar Shadow DOM-trädet till det. templateContent = document.querySelector ('mall'). innehåll; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id' '). förEach ((ele) => ele.removeAttribute (' id ')) article.attachShadow (läge:' stängt '). appendChild (templateContent.cloneNode )); document.querySelector (# toc) appendChild (artikel). 
Github demo
