{"id":4900,"date":"2024-10-24T13:46:34","date_gmt":"2024-10-24T13:46:34","guid":{"rendered":"https:\/\/howtogeek.blog\/lt\/?p=4900"},"modified":"2024-10-24T13:46:34","modified_gmt":"2024-10-24T13:46:34","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/lt\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Turinio (TOC) prid\u0117jimas prie savo vaiduoklio temos: \u017eingsnis po \u017eingsnio vadovas"},"content":{"rendered":"<p>Turinio (TOC) \u012ftraukimas \u012f savo \u201eGhost\u201c tinklara\u0161t\u012f \u017eymiai pagerina skaitytojo patirt\u012f, nes palengvina skland\u0173 nar\u0161ym\u0105 ilgesniuose straipsniuose. \u0160i pamoka pad\u0117s jums prid\u0117ti TOC prie bet kurios \u201eGhost\u201c temos naudojant TOCBOT \u2013 \u201eJavaScript\u201c papildin\u012f, kuris automati\u0161kai generuoja TOC i\u0161 j\u016bs\u0173 \u012fra\u0161\u0173 antra\u0161\u010di\u0173.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">TOCBOT integravimas \u012f Ghost<\/h2>\n<p>TOCBOT efektyviai sukuria TOC i\u0161 j\u016bs\u0173 \u012fra\u0161\u0173 antra\u0161\u010di\u0173. Atlikite \u0161iuos paprastus diegimo veiksmus:<\/p>\n<ul>\n<li>Prisijunkite prie \u201eGhost\u201c administratoriaus prietais\u0173 skydelio ir eikite \u012f <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Srityje <code>Site Header<\/code>\u012fterpkite reikiam\u0105 TOCBOT scenarij\u0173 ir stiliaus lap\u0105:<\/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>Tada skyriuje <code>Site Footer<\/code>inicijuokite TOCBOT naudodami \u0161\u012f scenarij\u0173:<\/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>\u012esitikinkite, kad <code>contentSelector<\/code>\u012fra\u0161o turinys atitinka temoje nurodyt\u0105 klas\u0119. Da\u017eniausiai naudojamos klas\u0117s yra <code>.post-content<\/code>, <code>.gh-content<\/code>arba <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Galiausiai i\u0161saugokite pakeitimus nustatymuose <code>Code injection<\/code>.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">TOC rezervuotos vietos \u012fterpimas \u012f prane\u0161imus<\/h2>\n<p>Jei norite savo straipsniuose parodyti TOC, norimoje vietoje tur\u0117site \u012fd\u0117ti rezervuot\u0105j\u0105 viet\u0105:<\/p>\n<ul>\n<li>Redaguokite \u012fra\u0161\u0105, kuriame norite \u012ftraukti TOC.<\/li>\n<li>Prid\u0117kite HTML kortel\u0119 norimoje vietoje \u012fvesdami <code>\/html<\/code>\u012f redaktori\u0173.<\/li>\n<li>\u012e HTML kortel\u0119 \u012ftraukite \u0161\u012f kod\u0105:<\/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>\u0160i kodo dalis nustato TOC erdv\u0119. Pasiekus \u012fra\u0161\u0105, TOCBOT u\u017epildys \u0161i\u0105 erdv\u0119 dinami\u0161kai sugeneruotais TOC, gautais i\u0161 j\u016bs\u0173 turinio antra\u0161\u010di\u0173.<\/p>\n<h2 id=\"styling-the-toc\">TOC i\u0161vaizdos pritaikymas<\/h2>\n<p>Galite suasmeninti TOC i\u0161vaizd\u0105, kad geriau atitikt\u0173 j\u016bs\u0173 temos dizain\u0105:<\/p>\n<ul>\n<li><code>Site Header<\/code>\u017demiau esan\u010dioje dalyje <code>Settings &gt; Code injection<\/code>prid\u0117kite tinkintus CSS stilius, \u012ftrauktus \u012f \u017eym\u0105 <code>&lt;style&gt;<\/code>:<\/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>Nedvejodami koreguokite \u0161iuos stilius pagal savo pageidavimus.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Modifikavimas \u012fvairioms temoms<\/h2>\n<p>Kadangi temose gali b\u016bti naudojami skirtingi turinio skil\u010di\u0173 klasi\u0173 pavadinimai, \u012fsitikinkite, kad <code>contentSelector<\/code>TOCBOT s\u0105ranka atitinka j\u016bs\u0173 temos turinio klas\u0119:<\/p>\n<ul>\n<li>Patikrinkite savo tem\u0105 prad\u0117dami nuo bet kurio atviro \u012fra\u0161o.<\/li>\n<li>De\u0161iniuoju pel\u0117s mygtuku spustel\u0117kite \u012fra\u0161o turin\u012f ir pasirinkite <code>Inspect<\/code>pasiekti nar\u0161ykl\u0117s k\u016br\u0117jo \u012frankius.<\/li>\n<li>Raskite klas\u0117s pavadinim\u0105, susiet\u0105 su elementu, kuriame yra j\u016bs\u0173 \u012fra\u0161o turinys, pvz. <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><code>contentSelector<\/code>Atsi\u017evelgdami \u012f tai, k\u0105 radote, b\u016btinai atnaujinkite TOCBOT scenarij\u0173.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Lipniojo TOC k\u016brimas<\/h2>\n<p>Jei norite, kad TOC b\u016bt\u0173 matomas, kol skaitytojai slenka, galite nustatyti, kad jis b\u016bt\u0173 lipnus:<\/p>\n<ul>\n<li>Prid\u0117kite <code>Site Header<\/code>\u0161\u012f CSS prie <code>&lt;style&gt;<\/code>\u017eymos:<\/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>Taip TOC bus i\u0161d\u0117styta per\u017ei\u016bros srities at\u017evilgiu, u\u017etikrinant, kad jis likt\u0173 matomas, kai naudotojai slinks \u012fra\u0161u.<\/p>\n<p>\u012egyvendindami \u0161ias instrukcijas, galite praturtinti savo \u201eGhost\u201c tinklara\u0161t\u012f funkciniu turiniu, taip pagerindami nar\u0161ym\u0105 ir skaitytoj\u0173 s\u0105veik\u0105 visuose j\u016bs\u0173 \u012fra\u0161uose.<\/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\">\u0160altinis<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Turinio (TOC) \u012ftraukimas \u012f savo \u201eGhost\u201c tinklara\u0161t\u012f \u017eymiai pagerina skaitytojo patirt\u012f, nes palengvina skland\u0173 nar\u0161ym\u0105 ilgesniuose straipsniuose. \u0160i pamoka pad\u0117s jums prid\u0117ti TOC prie bet kurios \u201eGhost\u201c temos naudojant TOCBOT \u2013 \u201eJavaScript\u201c papildin\u012f, kuris automati\u0161kai generuoja TOC i\u0161 j\u016bs\u0173 \u012fra\u0161\u0173 antra\u0161\u010di\u0173. TOCBOT integravimas \u012f Ghost TOCBOT efektyviai sukuria TOC i\u0161 j\u016bs\u0173 \u012fra\u0161\u0173 antra\u0161\u010di\u0173. Atlikite \u0161iuos [&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":[123],"class_list":["post-4900","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/posts\/4900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/comments?post=4900"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/posts\/4900\/revisions"}],"predecessor-version":[{"id":4901,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/posts\/4900\/revisions\/4901"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/media?parent=4900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/categories?post=4900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/lt\/wp-json\/wp\/v2\/tags?post=4900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}