Ako automaticky generovať obsah s priestormi HTML
Obsah môže výrazne zlepšiť používateľskú skúsenosť mnohých webových stránok dokumentačných lokalít alebo online encyklopédie ako je Wikipedia. Dobre navrhnutý obsah poskytuje prehľad o stránke a pomáha používateľom rýchlo prejsť na sekciu, ktorá ich zaujíma.
Tradične môžete vytvárať obsah buď v jazyku HTML, alebo pomocou jazyka JavaScript, ale nedávno štandardné HTML sloty poskytujú stredná cesta medzi týmito dvoma. Slot HTML je webový štandard, ktorý vám umožňuje pridať zástupné symboly na webovú stránku a neskôr vyplňte ho obsahom dynamicky.
Kedy používať
Môžete umiestniť
Pomocou tejto techniky musíte manuálne vytvoriť zdrojový kód HTML obsahu. JavaScript iba automaticky generuje textový obsah obsahu, na základe položiek alebo podpoložiek na stránke.
Ak nechcete, aby obsah obsahoval HTML, ktorý potrebujete generovať rozloženie aj obsah pomocou jazyka JavaScript.
1. Vytvorte HTML
Zdrojový kód HTML pre TOC (obsah) bude vnútri a štítok. Kód vnútri nie je vykreslená, kým sa do dokumentu nepridá pomocou jazyka JavaScript. Naše TOC budú mať zástupné symboly, konalo sa v
názov atribút každého štrbina v príslušných položkách a podpoložkách v dokumente.
Nižšie vidíte a vzor HTML Velociraptor (čo znamená "rýchly seizer" v latinčine) je ... Velociraptor bol stredne veľký dromaeosaurid, s dospelými ... Fosília dromaeosauridov primitívnejšia ako ... Počas expedície Amerického múzea prírodných ... Velociraptor je členom skupiny Eudromaeosauria, odvodenej podskupiny ... Vzorka "Fighting Dinosaurs", nájdená v roku 1971, zachováva ... V roku 2010 publikoval Hone a kolegov článok o ... Velociraptor bol do určitej miery teplokrvný, pretože potreboval ... Jeden velociratoptor mongoliensis lebka nesie dve paralelné ... Ako vidíte, každá položka je jedinečný A tu je tu HTML kód TOC, vnútri a V oboch útržkoch kódu vyššie si všimnite vhodný Predtým, ako sa pozriete do kódu JavaScript, ktorý pridá TOC z Uistite sa, že Teraz pridáme skript, ktorý vloží TOC nad Fragmentový kód uvedený vyššie vytvorí kópiu Potom, klonované Ak by sme vynulovali počítadlo CSS na Tu je screenshot výstupu: Ak chceš prepojiť tituly TOC s ich príslušnými nadpismi a nadpismi pridaním Velociraptor (čo znamená "rýchly seizer" v latinčine) je ... Velociraptor bol stredne veľký dromaeosaurid, s dospelými ... Fosília dromaeosauridov primitívnejšia ako ... Ako môžete vidieť vyššie, A názvy v obsahu sú zakotvené: V ďalšom riadku nad všetkými Pozrite si snímku obrazovky prepojený obsah nižšie: Môžete si pozrieť, prevziať alebo premeniť kód použitý v tomto príspevku z nášho Github Repo. s niektorými hlavičkami a podpoložkami.
popis
perie
História objavu
klasifikácia
Paleobiology
Chúlostivé správanie
metabolizmus
patológie
štrbina hodnota. štítok.
štrbina a názov atribúty vo vnútri nadpisov a 2. Čísla nadpisov
k dokumentu, poďme pridajte sériové čísla pre nadpisy pomocou čítačov CSS. článok counter-reset: nadpis; článok h2 :: pred counter-increment: heading; obsah: "0" (nadpis): ';';
counter-reset pravidlo patrí k prvku, ktorý je bezprostredný rodič všetkých titulov nesúcich štrbina atribút (Ktoré je prvok v našom kóde).3. Vložte TOC do dokumentu
štítok, vnútri kontajner. templateContent = document.querySelector ('šablóna'). článok = document.querySelector ('článok') cloneNode (true); article.attachShadow (mód: 'uzavretý'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (článok). a pripojí k nej Stromový strom stromu. Tiež pridajte kópiu obsah do tohto stínového stromu DOM. je vložený do prvkom je teraz prítomný v TOC, ale sú viditeľné iba jeho nadpisy a podpoložky, ktoré našli zástupný symbol vo vnútri TOC. telo alebo html prvok namiesto článok, počítadlo by spočítalo aj zoznam položiek v rámci TOC. Preto by ste mali vynulujte počítadlá v bezprostrednom rodičovi nadpisov.
4. Pridajte hypertextové odkazy
id do nadpisov a ukotvenie príslušného textu TOC, ktorý budete musieť odstrániť opakujúce sa id hodnoty z klonovaných článok.
popis
perie
id atribút je pridané do každej položky a podpoložky v článku.
id atribúty sú odstránené z klonovaného článku pred pripojením stínového stromu DOM. templateContent = document.querySelector ('šablóna'). článok = document.querySelector ('článok') cloneNode (true); článok.querySelectorAll ('* [id]') preEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed')) appendChild (templateContent.cloneNode )); document.querySelector ( '# toc') appendChild (článok). 
Github demo
