Jak automaticky generovat obsah s HTML sloty
Obsah například může výrazně zlepšit uživatelský komfort mnoha webových stránek dokumentační stránky nebo online encyklopedie jako Wikipedia. Dobře navržený obsah poskytuje přehled o stránce a pomáhá uživatelům rychle přejít do sekce, o kterou se zajímají.
Tradičně můžete vytvořit obsah buď v HTML nebo s JavaScriptem, ale v poslední době standardizované HTML sloty poskytují mezi oběma. HTML slot je webový standard, který vám umožní přidat zástupné symboly na webovou stránku a později dynamicky vyplňujte obsah.
Kdy použít
Můžete umístit
S touto technikou musíte ručně vytvořit zdrojový kód HTML obsahu. JavaScript pouze automaticky generuje obsah textu v obsahu, na základě čísel nebo podpoložek na stránce.
Pokud nechcete, aby se obsah nacházel v HTML, které potřebujete generovat jak rozvržení, tak obsah pomocí JavaScriptu.
1. Vytvořte HTML
Zdrojový kód HTML pro obsah (obsah) bude uvnitř štítek. Kód uvnitř není vykreslen, dokud není přidán do dokumentu pomocí JavaScriptu. Naše TOC bude mít zástupných symbolů, v držení
název každého atributu slot v odpovídajících záhlavích a podpoložkách v dokumentu.
Níže vidíte ukázkové HTML Velociraptor (což znamená latentní "švihák") je… Velociraptor byl středně velký dromaeosaurid s dospělými… Fosílie dromaeosaurids více primitivní než… Během amerického muzea přírodní historie… Velociraptor je členem skupiny Eudromaeosauria, odvozené podskupiny… Vzor "Boj proti dinosaurům", nalezený v roce 1971, zachovává… V roce 2010 vydali Hone a kolegové dokument o… Velociraptor byl do určité míry teplokrevný, jak to vyžadovalo… Jedna Velociratoptor mongoliensis lebka nese dvě paralely… Jak vidíte, každý nadpis je daný jedinečný A tady je to HTML kód TOC, uvnitř Ve výše uvedených dvou kódech si všimněte vhodný Než se podíváte do kódu JavaScriptu, který přidá TOC z Ujistěte se, že Nyní přidáme skript, který vloží TOC nad Výše uvedený kód kódu vytvoří kopii Pak klonovaný Pokud bychom resetovali čítač CSS na Zde je snímek výstupu: Pokud chceš propojit názvy TOC s jejich příslušnými záhlavími a podpoložkami přidáváním Velociraptor (což znamená latentní "švihák") je… Velociraptor byl středně velký dromaeosaurid s dospělými… Fosílie dromaeosaurids více primitivní než… Jak můžete vidět nahoře, A tituly uvnitř obsahu jsou ukotveny: Ve výše uvedeném řádku navíc Podívejte se na snímek obrazovky propojený obsah níže: Můžete se podívat, stáhnout, nebo vidličku kód použitý v tomto příspěvku z našeho Github Repo. s některými položkami a podpoložkami.
Popis
Peří
Historie objevování
Klasifikace
Paleobiologie
Zachytávání chování
Metabolismus
Patologie
slot hodnota. štítek.
slot a název atributy v záhlaví a 2. Zadejte čísla
k dokumentu, pojďme přidávat sériová čísla pro záhlaví pomocí čítačů CSS. článek counter-reset: nadpis; článek h2 :: before counter-increment: nadpis; obsah: „0“ lovec (záhlaví) „:“;
counter-reset pravidlo patří k prvku, který je všech rodičů všech titulů nesoucích slot atribut (který je prvek v našem kódu).3. Vložte TOC do dokumentu
štítek, uvnitř kontejner. templateContent = document.querySelector ('template'). article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (článek); a připojí k němu strom Stínů DOM. My také přidat kopii obsahu do tohoto stromu Stín DOM. je vložen do element je nyní také přítomen v TOC, jsou však viditelné pouze její záhlaví a podpoložky, které našli zástupný symbol uvnitř TOC. tělo nebo html prvek místo článek, čítač by také počítal seznam čísel uvnitř TOC. Proto bys měl resetujte počitadla u bezprostředního nadřazeného záhlaví.
4. Přidejte hypertextové odkazy
id do záhlaví a ukotvení odpovídajícího textu TOC, který budete mít odstranit opakující se id hodnoty z klonovaných článek.
Popis
Peří
id atribut je do každého čísla a podpoložky v článku.
id atributy odstraněny z klonovaného článku před připojením stromu Stín DOM k němu. templateContent = document.querySelector ('template'). article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]') forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true) )); document.querySelector ('# toc'). appendChild (článek); 
Demonstrace Github
