Come sommario generato automaticamente con slot HTML
Sommario può migliorare notevolmente l'esperienza utente di molti siti Web, ad esempio siti di documentazione o enciclopedie online come Wikipedia Un sommario ben progettato dà una panoramica della pagina e aiuta gli utenti a navigare rapidamente nella sezione a cui sono interessati.
Tradizionalmente, puoi creare sommari in HTML o con JavaScript, ma gli slot HTML standardizzati di recente forniscono un via di mezzo tra i due. Slot HTML è uno standard web che ti permette di aggiungi segnaposti a una pagina web e più tardi riempilo dinamicamente di contenuti.
Quando usare il
Puoi piazzare
Con questa tecnica, è necessario creare manualmente il codice sorgente HTML del sommario. Solo JavaScript genera automaticamente il contenuto del testo del sommario, in base alle intestazioni o sottotitoli nella pagina.
Se non vuoi che il sommario sia presente nel codice HTML necessario genera sia il layout che il contenuto con JavaScript.
1. Creare l'HTML
Il codice sorgente HTML per il sommario (sommario) sarà dentro a etichetta. Il codice all'interno non viene visualizzato fino a quando non viene aggiunto al documento da JavaScript. Il nostro TOC avrà segnaposto, svoltasi a
Il nome attributo di ciascuno fessura attributo nelle intestazioni e sottovoci corrispondenti nel documento.
Sotto, puoi vedere a esempio di HTML Velociraptor (che significa "swift seizer" in latino) è un ... Il velociraptor era un dromaeosauride di taglia media, con adulti ... Fossili di dromaeosauridi più primitivi di ... Durante una spedizione del Museo Americano di Storia Naturale ... Velociraptor è un membro del gruppo Eudromaeosauria, un sottogruppo derivato di ... L'esemplare "Fighting Dinosaurs", trovato nel 1971, conserva un ... Nel 2010, Hone e colleghi hanno pubblicato un articolo su ... Velociraptor era a sangue caldo in una certa misura, in quanto richiedeva un ... Un cranio Velociratoptor mongoliensis porta due paralleli ... Come puoi vedere, ogni titolo è dato un unico E, ecco il Codice HTML del sommario, dentro a Nei due frammenti di codice sopra, nota il accoppiamento Prima di esaminare il codice JavaScript che aggiungerà il sommario dal Assicurarsi che il Ora, aggiungiamo lo script inserisce il TOC sopra il Lo snippet di codice sopra crea una copia di Quindi, il clonato Se dovessimo ripristinare il contatore CSS al Ecco lo screenshot dell'output: Se lo desidera collega i titoli dei TOC alle rispettive intestazioni e sottotitoli aggiungendo Velociraptor (che significa "swift seizer" in latino) è un ... Il velociraptor era un dromaeosauride di taglia media, con adulti ... Fossili di dromaeosauridi più primitivi di ... Come puoi vedere sopra, il E il i titoli all'interno del sommario sono ancorati: Nella riga in alto sopra, tutto Guarda lo screenshot del indice collegato sotto: Puoi scaricare, scaricare o inserire il codice utilizzato in questo post dal nostro Github Repo. con alcune intestazioni e sottotitoli. Il
Descrizione
piume
Storia della scoperta
Classificazione
Paleobiologia
Comportamento di scavenging
Metabolismo
Patologia
fessura valore. etichetta.
fessura e nome attributi dentro i titoli e il 2. Numera le intestazioni
al documento, facciamolo aggiungi numeri di serie per le intestazioni, utilizzando i contatori CSS. articolo counter-reset: heading; article h2 :: before counter-increment: heading; contenuto: '0'counter (titolo)': ';
counter-reset la regola appartiene all'elemento che è il genitore immediato di tutti i titoli che portano il fessura attributo (qual è elemento nel nostro codice).3. Inserisci il sommario nel documento
etichetta, dentro il contenitore. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (articolo).; e allega un albero DOM ombra. Anche noi aggiungi una copia di Il contenuto di a questo albero DOM ombra. è inserito nel l'elemento è ora presente anche nel sommario, tuttavia sono visibili solo le intestazioni e le sottovoci che hanno trovato un segnaposto all'interno del TOC. corpo o html elemento invece di articolo, il contatore avrebbe contato anche l'elenco delle intestazioni all'interno del sommario. Ecco perché dovresti resettare i contatori al genitore diretto delle intestazioni.
4. Aggiungi collegamenti ipertestuali
id alle intestazioni e ancorando il loro testo TOC corrispondente dovrete rimuovere il ripetitivo id valori dal clonato articolo.
Descrizione
piume
id l'attributo è aggiunto a ogni intestazione e sottotitolo nell'articolo.
id gli attributi sono rimosso dall'articolo clonato prima allegando l'albero DOM ombra ad esso. templateContent = document.querySelector ('template'). content; 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 (articolo).; 
Demo Github
