Bezpłatna Konsultacja
Chcesz ułatwić swoim odbiorcą czytanie swoich artykułów na blogu i masz stronę na Webflow? Poniżej przedstawiłem instrukcję wdrożenia automatycznie generowanych Spisów Treści artykułów w Webflow, który pomoże użytkownika w znalezieniu potrzebnych im informacji oraz ułatwi poruszanie się po Twoich wpisach.
1. Przejdź do szablonu swoich wpisów w Webflow
2. Przejdź do ustawień szablonu i wstaw poniższy kod w sekcji Custom Code > Before </body> tag.
3. Kontenerowi, który zawiera całą treść artykułu nadaj id content
4. Przeciągnij z panelu Add Elements, div blocka, który będzie zawierał spis treści oraz nadaj mu id toc.
5. Odpowiednio wystylizuj ten blok i jeśli chcesz, aby przyklejał on się do góry ekranu podczas scrollowania, nadaj mu Position Sticky oraz jakąś wartość top.
Top jest odstępem od góry ekranu, jaki ma mieć Spisu treści po przyklejeniu się i musi on zostać podany.
Pamiętaj też o nadaniu rodzicowi bloku ze Spisem Treści Position Absolute.
6. Stwórz klasę, która będzie odpowiadała za wygląd linków w Spisie Treści, a następnie w kodzie, który wklejałeś do ustawień strony na samym początku, podmień klasę toc-link, na swoją własną.
7. Teraz powinno wszystko śmigać :), poniżej masz ostateczny efekt:
