{"id":4955,"date":"2024-10-24T13:45:32","date_gmt":"2024-10-24T13:45:32","guid":{"rendered":"https:\/\/howtogeek.blog\/cs\/?p=4955"},"modified":"2024-10-24T13:45:32","modified_gmt":"2024-10-24T13:45:32","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/cs\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"P\u0159id\u00e1n\u00ed obsahu (TOC) k va\u0161emu t\u00e9matu Ghost: Pr\u016fvodce krok za krokem"},"content":{"rendered":"<p>Za\u010dlen\u011bn\u00ed obsahu (TOC) do va\u0161eho blogu Ghost v\u00fdrazn\u011b zlep\u0161uje \u010dten\u00e1\u0159sk\u00fd z\u00e1\u017eitek t\u00edm, \u017ee usnad\u0148uje bezprobl\u00e9movou navigaci del\u0161\u00edmi \u010dl\u00e1nky. Tento tutori\u00e1l v\u00e1s provede procesem p\u0159id\u00e1v\u00e1n\u00ed obsahu k libovoln\u00e9mu t\u00e9matu Ghost pomoc\u00ed TOCBOT, pluginu JavaScriptu, kter\u00fd automaticky generuje obsah z nadpis\u016f p\u0159\u00edtomn\u00fdch ve va\u0161ich p\u0159\u00edsp\u011bvc\u00edch.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integrace TOCBOT v Ghost<\/h2>\n<p>TOCBOT efektivn\u011b vytv\u00e1\u0159\u00ed TOC z nadpis\u016f va\u0161ich p\u0159\u00edsp\u011bvk\u016f. P\u0159i instalaci postupujte podle t\u011bchto jednoduch\u00fdch krok\u016f:<\/p>\n<ul>\n<li>P\u0159ihlaste se do sv\u00e9ho administra\u010dn\u00edho panelu Ghost a p\u0159ejd\u011bte na <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Do <code>Site Header<\/code>oblasti vlo\u017ete po\u017eadovan\u00fd skript TOCBOT a \u0161ablonu styl\u016f:<\/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>D\u00e1le v <code>Site Footer<\/code>\u010d\u00e1sti inicializujte TOCBOT pomoc\u00ed n\u00e1sleduj\u00edc\u00edho 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>Ujist\u011bte se, \u017ee <code>contentSelector<\/code>odpov\u00edd\u00e1 t\u0159\u00edd\u011b ur\u010den\u00e9 ve va\u0161em motivu pro obsah p\u0159\u00edsp\u011bvku. Mezi b\u011b\u017en\u011b pou\u017e\u00edvan\u00e9 t\u0159\u00eddy pat\u0159\u00ed <code>.post-content<\/code>, <code>.gh-content<\/code>, nebo <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Nakonec ulo\u017ete zm\u011bny v <code>Code injection<\/code>nastaven\u00ed.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Vlo\u017een\u00ed z\u00e1stupn\u00e9ho symbolu TOC do p\u0159\u00edsp\u011bvk\u016f<\/h2>\n<p>Chcete-li ve sv\u00fdch \u010dl\u00e1nc\u00edch p\u0159edv\u00e9st obsah, mus\u00edte na po\u017eadovan\u00e9 m\u00edsto um\u00edstit z\u00e1stupn\u00fd symbol:<\/p>\n<ul>\n<li>Upravte p\u0159\u00edsp\u011bvek, do kter\u00e9ho chcete zahrnout TOC.<\/li>\n<li>P\u0159idejte kartu HTML na m\u00edsto, kter\u00e9 chcete, zad\u00e1n\u00edm <code>\/html<\/code>do editoru.<\/li>\n<li>Do HTML karty vlo\u017ete n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/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>Tento kus k\u00f3du vytv\u00e1\u0159\u00ed prostor pro TOC. Jakmile je p\u0159\u00edsp\u011bvek zp\u0159\u00edstupn\u011bn, TOCBOT vypln\u00ed tento prostor dynamicky generovan\u00fdm TOC odvozen\u00fdm z va\u0161ich nadpis\u016f obsahu.<\/p>\n<h2 id=\"styling-the-toc\">P\u0159izp\u016fsoben\u00ed vzhledu obsahu<\/h2>\n<p>Vzhled TOC si m\u016f\u017eete p\u0159izp\u016fsobit, aby l\u00e9pe odpov\u00eddal va\u0161emu n\u00e1vrhu motivu:<\/p>\n<ul>\n<li>V \u010d\u00e1sti <code>Site Header<\/code>pod <code>Settings &gt; Code injection<\/code>p\u0159idejte vlastn\u00ed styly CSS uzav\u0159en\u00e9 ve <code>&lt;style&gt;<\/code>zna\u010dce:<\/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>Nev\u00e1hejte a upravte tyto styly tak, aby vyhovovaly va\u0161im preferenc\u00edm.<\/p>\n<h2 id=\"adjusting-for-different-themes\">\u00daprava pro r\u016fzn\u00e1 t\u00e9mata<\/h2>\n<p>Vzhledem k tomu, \u017ee motivy mohou pro sekce obsahu pou\u017e\u00edvat r\u016fzn\u00e9 n\u00e1zvy t\u0159\u00edd, ujist\u011bte se, \u017ee <code>contentSelector<\/code>v nastaven\u00ed TOCBOT odpov\u00edd\u00e1 t\u0159\u00edd\u011b obsahu va\u0161eho motivu:<\/p>\n<ul>\n<li>Zkontrolujte sv\u00e9 t\u00e9ma tak, \u017ee za\u010dnete s jak\u00fdmkoli otev\u0159en\u00fdm p\u0159\u00edsp\u011bvkem.<\/li>\n<li>Klikn\u011bte prav\u00fdm tla\u010d\u00edtkem na obsah p\u0159\u00edsp\u011bvku a zvolte <code>Inspect<\/code>p\u0159\u00edstup k v\u00fdvoj\u00e1\u0159sk\u00fdm n\u00e1stroj\u016fm va\u0161eho prohl\u00ed\u017ee\u010de.<\/li>\n<li>Najd\u011bte n\u00e1zev t\u0159\u00eddy spojen\u00fd s prvkem, kter\u00fd obsahuje obsah va\u0161eho p\u0159\u00edsp\u011bvku, nap\u0159\u00edklad <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>Ujist\u011bte se, \u017ee aktualizujete <code>contentSelector<\/code>skript TOCBOT na z\u00e1klad\u011b toho, co najdete.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Vytvo\u0159en\u00ed Sticky TOC<\/h2>\n<p>Chcete-li, aby byl obsah viditeln\u00fd p\u0159i posouv\u00e1n\u00ed va\u0161ich \u010dten\u00e1\u0159\u016f, m\u016f\u017eete jej nastavit jako lepiv\u00fd:<\/p>\n<ul>\n<li>V souboru <code>Site Header<\/code>p\u0159idejte tento CSS do <code>&lt;style&gt;<\/code>zna\u010dky:<\/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\u00edm se TOC um\u00edst\u00ed ve vztahu k v\u00fd\u0159ezu a zajist\u00ed, \u017ee z\u016fstane v dohledu, kdy\u017e u\u017eivatel\u00e9 proch\u00e1zej\u00ed p\u0159\u00edsp\u011bvkem.<\/p>\n<p>Implementac\u00ed t\u011bchto pokyn\u016f m\u016f\u017eete obohatit sv\u016fj blog Ghost o funk\u010dn\u00ed obsah, a zlep\u0161it tak navigaci a interakci \u010dten\u00e1\u0159\u016f v r\u00e1mci va\u0161ich p\u0159\u00edsp\u011bvk\u016f.<\/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\">Zdroj<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Za\u010dlen\u011bn\u00ed obsahu (TOC) do va\u0161eho blogu Ghost v\u00fdrazn\u011b zlep\u0161uje \u010dten\u00e1\u0159sk\u00fd z\u00e1\u017eitek t\u00edm, \u017ee usnad\u0148uje bezprobl\u00e9movou navigaci del\u0161\u00edmi \u010dl\u00e1nky. Tento tutori\u00e1l v\u00e1s provede procesem p\u0159id\u00e1v\u00e1n\u00ed obsahu k libovoln\u00e9mu t\u00e9matu Ghost pomoc\u00ed TOCBOT, pluginu JavaScriptu, kter\u00fd automaticky generuje obsah z nadpis\u016f p\u0159\u00edtomn\u00fdch ve va\u0161ich p\u0159\u00edsp\u011bvc\u00edch. Integrace TOCBOT v Ghost TOCBOT efektivn\u011b vytv\u00e1\u0159\u00ed TOC z nadpis\u016f va\u0161ich p\u0159\u00edsp\u011bvk\u016f. [&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":[126],"class_list":["post-4955","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/4955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/comments?post=4955"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/4955\/revisions"}],"predecessor-version":[{"id":4956,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/4955\/revisions\/4956"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/media?parent=4955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/categories?post=4955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/tags?post=4955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}