Hoe automatisch gegenereerde inhoudsopgave te maken met HTML-slots
Inhoudsopgave kan de gebruikerservaring van veel websites aanzienlijk verbeteren, bijvoorbeeld documentatie sites of online encyclopedieën zoals Wikipedia. Een goed ontworpen inhoudsopgave geeft een overzicht van de pagina en helpt gebruikers snel naar de sectie waarin ze zijn geïnteresseerd te navigeren.
Traditioneel kunt u een inhoudsopgave maken in HTML of met JavaScript, maar de recent gestandaardiseerde HTML-slots bieden een in het midden tussen de twee. HTML-slot is een webstandaard waarmee je kunt plaatsaanduidingen toevoegen aan een webpagina en later vul het dynamisch met inhoud.
Wanneer gebruiken?
Je kunt plaatsen
Met deze techniek moet u de HTML-broncode van de inhoudsopgave handmatig maken. JavaScript genereert alleen de tekstinhoud van de inhoudsopgave automatisch, gebaseerd op de kopjes of subkoppen op de pagina.
Als u niet wilt dat de inhoudsopgave aanwezig is in de HTML die u nodig hebt genereer zowel de lay-out als de inhoud met JavaScript.
1. Maak de HTML
De HTML-broncode voor de TOC (inhoudsopgave) zal zijn in een label. De code erin wordt niet weergegeven totdat het door JavaScript aan het document is toegevoegd. Onze TOC zal hebben placeholders, vastgehouden
De naam kenmerk van elk sleuf attribuut in hun overeenkomstige kopjes en subkoppen in het document.
Hieronder ziet u een voorbeeld HTML Velociraptor (wat "snelle seizer" in het Latijn betekent) is een ... Velociraptor was een middelgrote dromaeosaurid, met volwassenen ... Fossielen van dromaeosauriden primitiever dan ... Tijdens een expeditie door het American Museum of Natural History ... Velociraptor is een lid van de groep Eudromaeosauria, een afgeleide subgroep van ... Het exemplaar "Fighting Dinosaurs", gevonden in 1971, behoudt een ... In 2010 publiceerden Hone en collega's een paper over ... Velociraptor was tot op zekere hoogte warmbloedig, omdat er een ... Eén schedel van Velociratoptor mongoliensis draagt twee parallelle ... Zoals je kunt zien, is elke kop een uniek gegeven En hier is de HTML-code van de TOC, in een In de twee bovenstaande codefragmenten, let op de passen bij Voordat u de JavaScript-code bekijkt die de TOC uit de Zorg ervoor dat de Nu voegen we het script daaraan toe voegt de TOC boven de Het codefragment hierboven maakt een kopie van Vervolgens werden de kloon gekloond Als we de CSS-teller zouden resetten op de Hier is de schermafbeelding van de uitvoer: Als je wilt koppel de TOC-titels aan hun respectieve koppen en subkoppen door toe te voegen Velociraptor (wat "snelle seizer" in het Latijn betekent) is een ... Velociraptor was een middelgrote dromaeosaurid, met volwassenen ... Fossielen van dromaeosauriden primitiever dan ... Zoals je hierboven kunt zien, is de En de titels in de inhoudsopgave zijn verankerd: In de extra regel hierboven, allemaal Zie de screenshot van de gekoppelde inhoudsopgave hieronder: Je kunt de code die in dit bericht wordt gebruikt, downloaden, downloaden of aanvullen met onze Github Repo. met enkele koppen en subkoppen. De
Omschrijving
veren
Geschiedenis van ontdekking
Classificatie
Paleobiology
Spoelgedrag
Metabolisme
Pathologie
sleuf waarde. label.
sleuf en naam attributen binnen de rubrieken en de 2. Nummer de kopjes
naar het document, laten we voeg serienummers voor de rubrieken toe, met behulp van CSS-tellers. artikel counter-reset: heading; artikel h2 :: vóór counter-increment: heading; inhoud: '0'counter (heading)': ';
contra-reset regel behoort tot het element dat de directe ouder van alle titels die het sleuf attribuut (welke is de element in onze code).3. Plaats de TOC in het document
label, binnen in de houder. templateContent = document.querySelector ('template'). inhoud; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (artikel).; en voegt er een schaduw-DOM-boom aan toe. Wij ook voeg een kopie toe van de inhoud naar deze Shadow DOM-boom. wordt ingevoegd in de element is nu ook aanwezig in de TOC, alleen de kopjes en subkoppen die een tijdelijke aanduiding in de TOC hebben gevonden, zijn zichtbaar. lichaam of html element in plaats van artikel, de teller zou ook de lijst met titels binnen de TOC hebben geteld. Dat is waarom je zou moeten reset de tellers bij de directe ouder van de rubrieken.
4. Voeg hyperlinks toe
ID kaart naar de koppen en verankering van hun bijbehorende TOC-tekst verwijder het repetitieve ID kaart waarden van de gekloonde artikel.
Omschrijving
veren
ID kaart kenmerk is toegevoegd aan elke kop en subkop in het artikel.
ID kaart attributen zijn verwijderd uit het gekloonde artikel voor de schaduw DOM-boom eraan koppelen. templateContent = document.querySelector ('template'). inhoud; 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 (artikel).; 
Github demo
