Jak automatycznie generować spis treści ze slotami HTML
Spis treści może znacznie poprawić komfort korzystania z wielu stron internetowych, na przykład strony z dokumentacją lub encyklopedie online jak Wikipedia. Dobrze zaprojektowany spis treści daje przegląd strony i pomaga użytkownikom szybko przejść do interesującej ich sekcji.
Tradycyjnie możesz tworzyć spis treści albo w HTML albo z JavaScript, ale ostatnio standaryzowane sloty HTML zapewniają środkowa droga między nimi. Slot HTML to standard internetowy, który pozwala na dodaj symbole zastępcze do strony internetowej i później dynamicznie wypełnij go treścią.
Kiedy używać
Możesz umieścić
Dzięki tej technice musisz ręcznie utworzyć kod źródłowy HTML spisu treści. JavaScript tylko automatycznie generuje treść tekstową spisu treści, na podstawie nagłówków lub podtytułów na stronie.
Jeśli nie chcesz umieszczać spisu treści w kodzie HTML, którego potrzebujesz wygeneruj zarówno układ, jak i zawartość za pomocą JavaScript.
1. Utwórz kod HTML
Będzie to kod źródłowy HTML spisu treści (spis treści) wewnątrz a etykietka. Kod wewnątrz nie jest renderowane, dopóki nie zostanie dodane do dokumentu przez JavaScript. Nasz spis treści będzie miał symbole zastępcze, która odbyła się w
The imię atrybut każdego otwór atrybut w odpowiednich nagłówkach i podpozycjach w dokumencie.
Poniżej możesz zobaczyć a przykładowy HTML Velociraptor (co oznacza „swift seizer” po łacinie) to… Velociraptor był średniej wielkości dromaeosauridem z dorosłymi… Skamieniałości dromaeozaurów bardziej prymitywne niż… Podczas amerykańskiej ekspedycji Muzeum Historii Naturalnej… Velociraptor jest członkiem grupy Eudromaeosauria, pochodnej podgrupy… Okaz „Walczące dinozaury”, znaleziony w 1971 r., Zachowuje… W 2010 roku Hone i współpracownicy opublikowali artykuł na temat… Velociraptor był do pewnego stopnia ciepłokrwisty, ponieważ wymagał… Jedna czaszka mongoliensis Velociratoptor nosi dwie równoległe… Jak widać, każdy nagłówek jest dany wyjątkowy I oto jest Kod HTML spisu treści, wewnątrz a W dwóch fragmentach kodu powyżej zwróć uwagę na pasujący Zanim przejrzysz kod JavaScript, który doda TOC z Upewnij się, że Teraz dodajemy skrypt wstawia spis treści powyżej Fragment kodu powyżej tworzy kopię Następnie sklonowano Jeśli zresetujemy licznik CSS na Oto zrzut ekranu wyjścia: Jeśli chcesz powiązać tytuły spisu treści z ich odpowiednimi nagłówkami i podpozycjami poprzez dodanie Velociraptor (co oznacza „swift seizer” po łacinie) to… Velociraptor był średniej wielkości dromaeosauridem z dorosłymi… Skamieniałości dromaeozaurów bardziej prymitywne niż… Jak widać powyżej I tytuły w spisie treści są zakotwiczone: W dodatkowej linii powyżej wszystko Zobacz zrzut ekranu połączony spis treści poniżej: Możesz pobrać, pobrać lub rozwidlić kod użyty w tym poście z naszego Github Repo. z niektórymi nagłówkami i podpozycjami. The
Opis
Pióra
Historia odkrycia
Klasyfikacja
Paleobiologia
Zachowanie niszczące
Metabolizm
Patologia
otwór wartość. etykietka.
otwór i imię atrybuty wewnątrz nagłówków i 2. Numeruj nagłówki
do dokumentu dodaj numery seryjne nagłówków, używając liczników CSS. artykuł counter-reset: nagłówek; artykuł h2 :: przed counter-increment: nagłówek; treść: '0'counter (nagłówek)': ';
licznik-reset reguła należy do elementu, który jest bezpośredni rodzic wszystkich tytułów noszących otwór atrybut (który jest element w naszym kodzie).3. Włóż spis treści do dokumentu
etykietka, w środku pojemnik. templateContent = document.querySelector („szablon”). zawartość; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (artykuł); i dołącza do niego Drzewo Shadow DOM. My także dodaj kopię zawartość do tego drzewa Cienia DOM. jest wstawiony do element jest teraz także w TOC, Jednak widoczne są tylko jego nagłówki i podpozycje, które znalazły symbol zastępczy w spisie treści. ciało lub html element zamiast artykuł, licznik policzyłby również listę nagłówków w spisie treści. Dlatego powinieneś zresetować liczniki w bezpośrednim rodzicu nagłówków.
4. Dodaj hiperłącza
ID do nagłówków i zakotwiczenia ich odpowiedniego tekstu spisu treści usuń powtarzające się ID wartości z sklonowanych artykuł.
Opis
Pióra
ID atrybut jest dodane do każdego nagłówka i podtytułu w artykule.
ID atrybuty są usunięto ze sklonowanego artykułu przed dołączanie do niego drzewa Shadow DOM. templateContent = document.querySelector („szablon”). zawartość; 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 (artykuł); 
Demo Github
