Generator spisu treści dla HTML i Markdown | We.Inc
Wklej artykuł w HTML lub Markdown i otrzymaj zagnieżdżony spis treści z linkami do kotwic, identyfikatorami dodanymi do nagłówków i CSS przyklejonego panelu bocznego. W Twojej przeglądarce.
Generator spisu treści
Ten generator odczytuje nagłówki w Twoim artykule, nadaje każdemu unikalny identyfikator i buduje zagnieżdżoną listę linków, które do nich prowadzą. Wklej HTML lub Markdown, wybierz poziomy nagłówków do uwzględnienia i skopiuj gotowy blok nav, listę Markdown albo swój HTML z już dodanymi identyfikatorami kotwic.
Co wklejasz i co otrzymujesz
Wejście
Skąd czytane są nagłówki
Wyniki
HTML
Elementy <h1> do <h6>
HTML nawigacji, lista Markdown, artykuł z dodanymi identyfikatorami
Markdown
Wiersze zaczynające się od # do ######
HTML nawigacji, lista Markdown
Istniejące identyfikatory
id="..." lub {#custom-id}
Pozostają bez zmian
Powtórzone nagłówki
Ten sam tekst dwa razy
Drugi identyfikator dostaje -1, potem -2
Długie poradniki łatwiej przeglądać i udostępniać, gdy czytelnicy mogą przeskoczyć do wybranej sekcji. Linki dają też każdej części strony własny adres, więc możesz wysłać komuś odnośnik prosto do akapitu, którego potrzebuje.
Jak powstają identyfikatory kotwic
Tekst każdego nagłówka jest zamieniany na małe litery, znaki interpunkcyjne są usuwane, a spacje zamieniane na myślniki, więc Choose a layout staje się choose-a-layout. Litery z akcentami i pisma niełacińskie są zachowywane, a nie usuwane.
Identyfikator musi być unikalny w dokumencie i nie może zawierać spacji. Gdy ten sam tekst nagłówka pojawia się dwa razy, druga kopia dostaje dopisek -1, trzecia -2, dzięki czemu każdy link ma dokładnie jeden cel.
Platformy obsługujące Markdown tworzą własne identyfikatory nagłówków, a ich reguły nieco się różnią. Jeśli publikujesz Markdown w miejscu, które już dodaje identyfikatory, sprawdź jeden link po publikacji; w HTML, nad którym masz kontrolę, użyj wyniku z artykułem, aby identyfikatory zgadzały się dokładnie.
Gdzie umieścić blok spisu treści
Umieść spis treści po wstępie, a nie nad nim, aby czytelnicy najpierw dowiedzieli się, o czym jest strona. Na szerokich ekranach przyklejony panel boczny trzyma go w zasięgu podczas przewijania.
Jeśli Twoja strona ma stały nagłówek, link do sekcji ukryje docelowy nagłówek pod nim. Właściwość scroll-margin-top dodaje odstęp nad celem, gdy przeglądarka do niego przewija, co rozwiązuje problem bez JavaScriptu.
Wklej swój artykuł. Narzędzie rozpoznaje HTML, gdy widzi znaczniki nagłówków; w przeciwnym razie odczytuje nagłówki Markdown i pomija bloki kodu w ogrodzeniach.
Wybierz najpłytszy i najgłębszy poziom nagłówków do uwzględnienia. Większość artykułów wymienia tylko H2 i H3.
Wybierz listę punktowaną lub numerowaną i ustaw etykietę, którą czytniki ekranu odczytają dla nawigacji.
Skopiuj blok spisu treści. Przy wejściu HTML skopiuj też artykuł z identyfikatorami, aby każdy link miał swój cel.
Pisz krótkie i konkretne nagłówki; stają się zarówno tekstem linku, jak i kotwicą w pasku adresu.
Nie pomijaj poziomów (H4 bezpośrednio pod H2). Narzędzie i tak go zagnieździ, ale użytkownicy czytników ekranu poruszają się według poziomów nagłówków.
Zmiana nagłówka zmienia jego identyfikator, co psuje linki udostępnione przez innych. Ustaw stały identyfikator, jeśli do sekcji prowadzą linki z innych miejsc.
Nie umieszczaj H1 strony w spisie treści; czytelnik jest już na górze.
Najczęściej zadawane pytania
Jak zrobić klikalny spis treści w HTML?
Nadaj każdemu nagłówkowi id, a potem podlinkuj go znakiem krzyżyka: <a href="#set-a-budget">Set a budget</a> przenosi do elementu z id="set-a-budget". Umieść linki w elemencie nav z listą w środku. To narzędzie tworzy zarówno identyfikatory, jak i listę.
Dlaczego link do sekcji ląduje pod nagłówkiem strony?
Stały lub przyklejony nagłówek zasłania górę okna, a przeglądarka przewija nagłówek sekcji właśnie do tej górnej krawędzi. Dodaj nagłówkom scroll-margin-top nieco większe niż wysokość nagłówka strony, a nagłówek sekcji zatrzyma się pod nim.
Czy spis treści może być przyklejony?
Tak. Umieść nav w kolumnie bocznej i nadaj mu position: sticky z wartością top. Przewija się normalnie, aż osiągnie to przesunięcie, a potem zostaje na miejscu, dopóki jego kolumna jest na ekranie. Przykład poniżej pokazuje CSS.
Czy spis treści pomaga w SEO?
Pomaga czytelnikom znaleźć sekcje i daje każdej sekcji adres, do którego można linkować. Wyszukiwarki czasem pokazują linki do sekcji, ale same decydują kiedy; żadne ustawienie tego nie gwarantuje.
Przyklejony panel ze spisem treści
Układ dwukolumnowy, w którym spis treści pozostaje widoczny, a nagłówki nie chowają się pod stałym nagłówkiem strony.
Przyklejona nawigacja i odstęp nagłówków
Ramka jest niska, więc przewijaj w jej wnętrzu: kolumna ze spisem treści zostaje przypięta, a artykuł się przesuwa.
Wygeneruj spis treści
Wklej artykuł jako HTML lub Markdown. Nagłówki są odczytywane, dostają unikalne identyfikatory kotwic, są zagnieżdżane według poziomu i zamieniane na nawigację HTML, listę Markdown oraz, przy wejściu HTML, kopię Twojego artykułu z dodanymi brakującymi identyfikatorami.
Spis treści
Artykuł (HTML lub Markdown)
Od poziomu
Do poziomu
Etykieta nawigacji
Styl listy
Punktory
Numery
Odczytano jako {format}: znaleziono {n} nagłówek, {m} w zakresie.
Odczytano jako {format}: znaleziono nagłówki: {n}, w zakresie: {m}.
Brak nagłówków w tym zakresie. Poszerz poziomy lub sprawdź, czy nagłówki zaczynają się od # albo używają znaczników h.