{"id":4953,"date":"2024-10-24T13:46:54","date_gmt":"2024-10-24T13:46:54","guid":{"rendered":"https:\/\/howtogeek.blog\/lv\/?p=4953"},"modified":"2024-10-24T13:46:54","modified_gmt":"2024-10-24T13:46:54","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/lv\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Satura r\u0101d\u012bt\u0101ja (TOC) pievieno\u0161ana j\u016bsu spoku t\u0113mai: soli pa solim"},"content":{"rendered":"<p>Satura r\u0101d\u012bt\u0101ja (TOC) iek\u013cau\u0161ana sav\u0101 Ghost emu\u0101r\u0101 iev\u0113rojami uzlabo las\u012bt\u0101ja pieredzi, atvieglojot netrauc\u0113tu navig\u0101ciju gar\u0101kos rakstos. \u0160\u012b apm\u0101c\u012bba pal\u012bdz\u0113s jums pievienot TOC jebkurai Ghost t\u0113mai, izmantojot TOCBOT\u00a0\u2014 JavaScript spraudni, kas autom\u0101tiski \u0123ener\u0113 TOC no j\u016bsu zi\u0146\u0101s eso\u0161ajiem virsrakstiem.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">TOCBOT integr\u0113\u0161ana programm\u0101 Ghost<\/h2>\n<p>TOCBOT efekt\u012bvi izveido TOC no j\u016bsu zi\u0146u virsrakstiem. Veiciet \u0161\u012bs vienk\u0101r\u0161\u0101s instal\u0113\u0161anas darb\u012bbas:<\/p>\n<ul>\n<li>Piesakieties sav\u0101 Ghost administratora inform\u0101cijas panel\u012b un dodieties uz <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Apgabal\u0101 <code>Site Header<\/code>ievietojiet nepiecie\u0161amo TOCBOT skriptu un stila lapu:<\/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>P\u0113c tam sada\u013c\u0101 <code>Site Footer<\/code>inicializ\u0113jiet TOCBOT, izmantojot \u0161\u0101du skriptu:<\/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>P\u0101rliecinieties, vai tas <code>contentSelector<\/code>atbilst mot\u012bv\u0101 nor\u0101d\u012btajai klasei zi\u0146as saturam. Parasti izmantot\u0101s klases ir <code>.post-content<\/code>, <code>.gh-content<\/code>vai <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Visbeidzot, saglab\u0101jiet izmai\u0146as iestat\u012bjumos <code>Code injection<\/code>.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">TOC vietturi ievieto\u0161ana zi\u0146\u0101s<\/h2>\n<p>Lai savos rakstos par\u0101d\u012btu TOC, v\u0113lamaj\u0101 viet\u0101 ir j\u0101ievieto vietturis:<\/p>\n<ul>\n<li>Redi\u0123\u0113jiet zi\u0146u, kur\u0101 v\u0113laties iek\u013caut TOC.<\/li>\n<li>Pievienojiet HTML karti v\u0113lamaj\u0101 viet\u0101, ierakstot <code>\/html<\/code>redaktor\u0101.<\/li>\n<li>Iek\u013caujiet HTML kart\u0113 \u0161\u0101du kodu:<\/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>\u0160\u012b koda da\u013ca nosaka vietu TOC. Kad zi\u0146ai b\u016bs piek\u013c\u016bts, TOCBOT aizpild\u012bs \u0161o vietu ar dinamiski \u0123ener\u0113tu TOC, kas ieg\u016bta no j\u016bsu satura virsrakstiem.<\/p>\n<h2 id=\"styling-the-toc\">TOC izskata piel\u0101go\u0161ana<\/h2>\n<p>Varat personaliz\u0113t TOC izskatu, lai tas lab\u0101k atbilstu j\u016bsu mot\u012bva dizainam:<\/p>\n<ul>\n<li>Sada\u013c\u0101 , pievienojiet piel\u0101gotus CSS stilus <code>Site Header<\/code>, <code>Settings &gt; Code injection<\/code>kas ietverti <code>&lt;style&gt;<\/code>tag\u0101:<\/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>J\u016btieties br\u012bvi piel\u0101got \u0161os stilus atbilsto\u0161i sav\u0101m v\u0113lm\u0113m.<\/p>\n<h2 id=\"adjusting-for-different-themes\">P\u0101rveido\u0161ana da\u017e\u0101d\u0101m t\u0113m\u0101m<\/h2>\n<p>T\u0101 k\u0101 mot\u012bvos satura sada\u013c\u0101m var tikt izmantoti da\u017e\u0101di kla\u0161u nosaukumi, <code>contentSelector<\/code>TOCBOT iestat\u012bjumos nodro\u0161iniet, lai tas atbilstu j\u016bsu mot\u012bva satura klasei:<\/p>\n<ul>\n<li>P\u0101rbaudiet savu mot\u012bvu, s\u0101kot ar jebkuru atv\u0113rtu zi\u0146u.<\/li>\n<li>Ar peles labo pogu noklik\u0161\u0137iniet uz zi\u0146as satura un izv\u0113lieties, <code>Inspect<\/code>lai piek\u013c\u016btu p\u0101rl\u016bkprogrammas izstr\u0101d\u0101t\u0101ja r\u012bkiem.<\/li>\n<li>Atrodiet klases nosaukumu, kas saist\u012bts ar elementu, kur\u0101 ir j\u016bsu zi\u0146as saturs, piem\u0113ram <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>Noteikti atjauniniet <code>contentSelector<\/code>TOCBOT skriptu, pamatojoties uz atrasto.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Sticky TOC izveide<\/h2>\n<p>Lai TOC b\u016btu redzams, kam\u0113r las\u012bt\u0101ji ritina, varat iestat\u012bt to k\u0101 lip\u012bgu.<\/p>\n<ul>\n<li>Pievienojiet <code>Site Header<\/code>\u0161o CSS tag\u0101 <code>&lt;style&gt;<\/code>:<\/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>T\u0101d\u0113j\u0101di TOC tiks novietots attiec\u012bb\u0101 pret skata logu, nodro\u0161inot, ka tas paliek redzams, lietot\u0101jiem ritinot zi\u0146u.<\/p>\n<p>Ievie\u0161ot \u0161os nor\u0101d\u012bjumus, varat bag\u0101tin\u0101t savu Ghost emu\u0101ru ar funkcion\u0101lu satura r\u0101d\u012bt\u0101ju, t\u0101d\u0113j\u0101di uzlabojot navig\u0101ciju un las\u012bt\u0101ju mijiedarb\u012bbu vis\u0101s j\u016bsu zi\u0146\u0101s.<\/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\">Avots<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Satura r\u0101d\u012bt\u0101ja (TOC) iek\u013cau\u0161ana sav\u0101 Ghost emu\u0101r\u0101 iev\u0113rojami uzlabo las\u012bt\u0101ja pieredzi, atvieglojot netrauc\u0113tu navig\u0101ciju gar\u0101kos rakstos. \u0160\u012b apm\u0101c\u012bba pal\u012bdz\u0113s jums pievienot TOC jebkurai Ghost t\u0113mai, izmantojot TOCBOT\u00a0\u2014 JavaScript spraudni, kas autom\u0101tiski \u0123ener\u0113 TOC no j\u016bsu zi\u0146\u0101s eso\u0161ajiem virsrakstiem. TOCBOT integr\u0113\u0161ana programm\u0101 Ghost TOCBOT efekt\u012bvi izveido TOC no j\u016bsu zi\u0146u virsrakstiem. Veiciet \u0161\u012bs vienk\u0101r\u0161\u0101s instal\u0113\u0161anas darb\u012bbas: [&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-4953","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/4953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/comments?post=4953"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/4953\/revisions"}],"predecessor-version":[{"id":4954,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/posts\/4953\/revisions\/4954"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/media?parent=4953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/categories?post=4953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/lv\/wp-json\/wp\/v2\/tags?post=4953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}