{"id":4960,"date":"2024-10-24T13:45:51","date_gmt":"2024-10-24T13:45:51","guid":{"rendered":"https:\/\/howtogeek.blog\/pl\/?p=4960"},"modified":"2024-10-24T13:45:51","modified_gmt":"2024-10-24T13:45:51","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/pl\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Dodawanie spisu tre\u015bci (TOC) do motywu Ghost: przewodnik krok po kroku"},"content":{"rendered":"<p>W\u0142\u0105czenie spisu tre\u015bci (TOC) do bloga Ghost znacznie poprawia wra\u017cenia czytelnika, u\u0142atwiaj\u0105c p\u0142ynn\u0105 nawigacj\u0119 po d\u0142u\u017cszych artyku\u0142ach. Ten samouczek przeprowadzi Ci\u0119 przez proces dodawania spisu tre\u015bci do dowolnego motywu Ghost za pomoc\u0105 TOCBOT, wtyczki JavaScript, kt\u00f3ra automatycznie generuje spis tre\u015bci z nag\u0142\u00f3wk\u00f3w obecnych w Twoich postach.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integracja TOCBOT w Ghost<\/h2>\n<p>TOCBOT sprawnie konstruuje spis tre\u015bci z nag\u0142\u00f3wk\u00f3w post\u00f3w. Wykonaj nast\u0119puj\u0105ce proste kroki instalacji:<\/p>\n<ul>\n<li>Zaloguj si\u0119 do panelu administratora Ghost i przejd\u017a do <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>W tym <code>Site Header<\/code>obszarze nale\u017cy wstawi\u0107 wymagany skrypt TOCBOT i arkusz styl\u00f3w:<\/li>\n<\/ul>\n<p> <code> <code>&lt;script type=\"text\/javascript\"src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.min.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tocbot\/4.21.0\/tocbot.css\"rel=\"stylesheet\"&gt;<\/code><\/code><\/p>\n<ul>\n<li>Nast\u0119pnie w tej <code>Site Footer<\/code>sekcji zainicjuj TOCBOT za pomoc\u0105 nast\u0119puj\u0105cego skryptu:<\/li>\n<\/ul>\n<p> <code> <code>&lt;script&gt;<br \/>\n  document.addEventListener('DOMContentLoaded', function() {<br \/>\n    tocbot.init({<br \/>\n      tocSelector: '.toc',<br \/>\n      contentSelector: '.post-content',<br \/>\n      headingSelector: 'h1, h2, h3, h4',<br \/>\n      scrollSmooth: true<br \/>\n    });<br \/>\n  });<br \/>\n&lt;\/script&gt;<\/code><\/code><\/p>\n<p>Upewnij si\u0119, \u017ce jest <code>contentSelector<\/code>zgodny z klas\u0105 okre\u015blon\u0105 w Twoim motywie dla tre\u015bci posta. Powszechnie u\u017cywane klasy obejmuj\u0105 <code>.post-content<\/code>, <code>.gh-content<\/code>, lub <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Na koniec zapisz zmiany w <code>Code injection<\/code>ustawieniach.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Wstawianie symbolu zast\u0119pczego spisu tre\u015bci do post\u00f3w<\/h2>\n<p>Aby wy\u015bwietli\u0107 spis tre\u015bci w swoich artyku\u0142ach, musisz umie\u015bci\u0107 symbol zast\u0119pczy w wybranym miejscu:<\/p>\n<ul>\n<li>Edytuj post, do kt\u00f3rego chcesz doda\u0107 spis tre\u015bci.<\/li>\n<li>Dodaj kart\u0119 HTML w wybranym przez siebie miejscu, wpisuj\u0105c j\u0105 <code>\/html<\/code>w edytorze.<\/li>\n<li>Umie\u015b\u0107 poni\u017cszy kod na karcie HTML:<\/li>\n<\/ul>\n<p> <code> <code>&lt;div class=\"toc\"&gt;&lt;\/div&gt;<\/code><\/code><\/p>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"479\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-507.webp\" title=\"\" width=\"1135\"\/><\/figure>\n<p>Ten fragment kodu tworzy przestrze\u0144 dla spisu tre\u015bci. Po uzyskaniu dost\u0119pu do wpisu TOCBOT wype\u0142ni t\u0119 przestrze\u0144 dynamicznie generowanym spisem tre\u015bci pochodz\u0105cym z nag\u0142\u00f3wk\u00f3w tre\u015bci.<\/p>\n<h2 id=\"styling-the-toc\">Dostosowywanie wygl\u0105du spisu tre\u015bci<\/h2>\n<p>Mo\u017cesz spersonalizowa\u0107 wygl\u0105d spisu tre\u015bci, aby lepiej dopasowa\u0107 go do projektu swojego motywu:<\/p>\n<ul>\n<li>Poni\u017cej <code>Site Header<\/code>dodaj <code>Settings &gt; Code injection<\/code>niestandardowe style CSS zawarte w <code>&lt;style&gt;<\/code>znaczniku:<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    padding: 20px;<br \/>\n    border: 1px solid #e0e0e0;<br \/>\n    background-color: #f9f9f9;<br \/>\n    border-radius: 5px;<br \/>\n  }<br \/>\n . toc a {<br \/>\n    text-decoration: none;<br \/>\n    color: #333;<br \/>\n  }<br \/>\n . toc a:hover {<br \/>\n    text-decoration: underline;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>Mo\u017cesz swobodnie dostosowa\u0107 te style do swoich preferencji.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Modyfikowanie dla r\u00f3\u017cnych motyw\u00f3w<\/h2>\n<p>Poniewa\u017c motywy mog\u0105 u\u017cywa\u0107 r\u00f3\u017cnych nazw klas dla sekcji tre\u015bci, upewnij si\u0119, \u017ce <code>contentSelector<\/code>w konfiguracji TOCBOT nazwa odpowiada klasie tre\u015bci Twojego motywu:<\/p>\n<ul>\n<li>Zacznij od dowolnego otwartego wpisu i zapoznaj si\u0119 ze swoim motywem.<\/li>\n<li>Kliknij prawym przyciskiem myszy na tre\u015b\u0107 wpisu i wybierz <code>Inspect<\/code>dost\u0119p do narz\u0119dzi programistycznych w swojej przegl\u0105darce.<\/li>\n<li>Znajd\u017a nazw\u0119 klasy skojarzon\u0105 z elementem zawieraj\u0105cym tre\u015b\u0107 Twojego wpisu, np <code>.post-content<\/code>. .<\/li>\n<\/ul>\n<figure class=\"wp-block-image\"><img alt=\"\" class=\"wp-image\" decoding=\"async\" height=\"420\" loading=\"lazy\" src=\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2024\/10\/image-506.webp\" title=\"\" width=\"942\"\/><\/figure>\n<ul>\n<li>Pami\u0119taj o aktualizacji <code>contentSelector<\/code>skryptu TOCBOT na podstawie tego, co znajdziesz.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Tworzenie sta\u0142ego spisu tre\u015bci<\/h2>\n<p>Aby spis tre\u015bci by\u0142 widoczny podczas przewijania strony przez czytelnik\u00f3w, mo\u017cesz ustawi\u0107 go jako przyklejony:<\/p>\n<ul>\n<li>W <code>Site Header<\/code>, dodaj ten kod CSS w <code>&lt;style&gt;<\/code>znaczniku:<\/li>\n<\/ul>\n<p> <code> <code>&lt;style&gt;<br \/>\n . toc {<br \/>\n    position: sticky; top: 20px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<\/code><\/code><\/p>\n<p>Spowoduje to umieszczenie spisu tre\u015bci wzgl\u0119dem obszaru widoku, dzi\u0119ki czemu pozostanie on widoczny, gdy u\u017cytkownicy b\u0119d\u0105 przewija\u0107 wpis.<\/p>\n<p>Wdra\u017caj\u0105c te instrukcje, mo\u017cesz wzbogaci\u0107 swojego bloga Ghost o funkcjonalny spis tre\u015bci, usprawniaj\u0105c w ten spos\u00f3b nawigacj\u0119 i interakcj\u0119 z czytelnikami podczas przegl\u0105dania wpis\u00f3w.<\/p>\n<p><a class=\"xiaomi\" href=\"https:\/\/allthings.how\/how-to-add-table-of-contents-toc-to-any-ghost-theme\/\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">\u0179r\u00f3d\u0142o<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W\u0142\u0105czenie spisu tre\u015bci (TOC) do bloga Ghost znacznie poprawia wra\u017cenia czytelnika, u\u0142atwiaj\u0105c p\u0142ynn\u0105 nawigacj\u0119 po d\u0142u\u017cszych artyku\u0142ach. Ten samouczek przeprowadzi Ci\u0119 przez proces dodawania spisu tre\u015bci do dowolnego motywu Ghost za pomoc\u0105 TOCBOT, wtyczki JavaScript, kt\u00f3ra automatycznie generuje spis tre\u015bci z nag\u0142\u00f3wk\u00f3w obecnych w Twoich postach. Integracja TOCBOT w Ghost TOCBOT sprawnie konstruuje spis tre\u015bci [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[130],"class_list":["post-4960","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/4960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/comments?post=4960"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/4960\/revisions"}],"predecessor-version":[{"id":4961,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/posts\/4960\/revisions\/4961"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/media?parent=4960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/categories?post=4960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/pl\/wp-json\/wp\/v2\/tags?post=4960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}