{"id":5005,"date":"2024-10-24T13:45:52","date_gmt":"2024-10-24T13:45:52","guid":{"rendered":"https:\/\/howtogeek.blog\/da\/?p=5005"},"modified":"2024-10-24T13:45:52","modified_gmt":"2024-10-24T13:45:52","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/da\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Tilf\u00f8jelse af en indholdsfortegnelse (TOC) til dit sp\u00f8gelsestema: En trin-for-trin guide"},"content":{"rendered":"<p>At inkorporere en indholdsfortegnelse (TOC) i din Ghost-blog forbedrer l\u00e6serens oplevelse markant ved at lette problemfri navigation gennem l\u00e6ngere artikler. Denne tutorial vil guide dig gennem processen med at tilf\u00f8je en TOC til ethvert Ghost-tema ved hj\u00e6lp af TOCBOT, et JavaScript-plugin, der automatisk genererer en TOC fra overskrifterne i dine indl\u00e6g.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integrering af TOCBOT i Ghost<\/h2>\n<p>TOCBOT konstruerer effektivt en indholdsfortegnelse ud fra dine indl\u00e6gsoverskrifter. F\u00f8lg disse enkle trin for installation:<\/p>\n<ul>\n<li>Log ind p\u00e5 dit Ghost-admin-dashboard og g\u00e5 til <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Inds\u00e6t det p\u00e5kr\u00e6vede TOCBOT-script og stylesheet i <code>Site Header<\/code>omr\u00e5det:<\/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>Derefter, i <code>Site Footer<\/code>afsnittet, initialiser TOCBOT ved hj\u00e6lp af f\u00f8lgende script:<\/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>S\u00f8rg for, at det <code>contentSelector<\/code>stemmer overens med den klasse, der er angivet i dit tema for indl\u00e6gsindhold. Almindeligt brugte klasser omfatter <code>.post-content<\/code>, <code>.gh-content<\/code>, eller <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Gem til sidst dine \u00e6ndringer i <code>Code injection<\/code>indstillingerne.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Inds\u00e6ttelse af TOC-pladsholderen i indl\u00e6g<\/h2>\n<p>For at vise indholdsfortegnelsen i dine artikler skal du placere en pladsholder p\u00e5 den \u00f8nskede placering:<\/p>\n<ul>\n<li>Rediger et indl\u00e6g, hvor du \u00f8nsker at inkludere indholdsfortegnelsen.<\/li>\n<li>Tilf\u00f8j et HTML-kort p\u00e5 det sted, du foretr\u00e6kker, ved at skrive <code>\/html<\/code>i editoren.<\/li>\n<li>Inkluder f\u00f8lgende kode i HTML-kortet:<\/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>Dette stykke kode etablerer et rum til indholdsfortegnelsen. N\u00e5r indl\u00e6gget er tilg\u00e5et, vil TOCBOT udfylde dette rum med den dynamisk genererede TOC, der er afledt af dine indholdsoverskrifter.<\/p>\n<h2 id=\"styling-the-toc\">Tilpasning af indholdsfortegnelsens udseende<\/h2>\n<p>Du kan tilpasse udseendet af indholdsfortegnelsen for bedre at tilpasse dit temadesign:<\/p>\n<ul>\n<li>Tilf\u00f8j tilpassede CSS-typografier omsluttet af et tag i <code>Site Header<\/code>under :<code>Settings &gt; Code injection<\/code><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>Du er velkommen til at tilpasse disse stilarter, s\u00e5 de passer til dine pr\u00e6ferencer.<\/p>\n<h2 id=\"adjusting-for-different-themes\">\u00c6ndring for forskellige temaer<\/h2>\n<p>Da temaer kan bruge forskellige klassenavne til indholdssektioner, skal du sikre dig, at <code>contentSelector<\/code>TOCBOT-ops\u00e6tningen matcher dit temas indholdsklasse:<\/p>\n<ul>\n<li>Unders\u00f8g dit tema ved at starte med et \u00e5bent indl\u00e6g.<\/li>\n<li>H\u00f8jreklik p\u00e5 indl\u00e6ggets indhold og v\u00e6lg <code>Inspect<\/code>at f\u00e5 adgang til din browsers udviklerv\u00e6rkt\u00f8jer.<\/li>\n<li>Find det klassenavn, der er knyttet til det element, der indeholder dit indl\u00e6gsindhold, s\u00e5som <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>S\u00f8rg for at opdatere <code>contentSelector<\/code>i TOCBOT-scriptet baseret p\u00e5, hvad du finder.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Oprettelse af en Sticky TOC<\/h2>\n<p>For at holde indholdsfortegnelsen synlig, mens dine l\u00e6sere ruller, kan du indstille den til at v\u00e6re kl\u00e6brig:<\/p>\n<ul>\n<li><code>Site Header<\/code>Tilf\u00f8j denne CSS i et tag i <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>Dette vil placere indholdsfortegnelsen i forhold til visningsporten, hvilket sikrer, at den forbliver i syne, n\u00e5r brugerne ruller gennem indl\u00e6gget.<\/p>\n<p>Ved at implementere disse instruktioner kan du berige din Ghost-blog med en funktionel indholdsfortegnelse og dermed forbedre navigation og l\u00e6serinteraktion gennem dine indl\u00e6g.<\/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\">Kilde<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>At inkorporere en indholdsfortegnelse (TOC) i din Ghost-blog forbedrer l\u00e6serens oplevelse markant ved at lette problemfri navigation gennem l\u00e6ngere artikler. Denne tutorial vil guide dig gennem processen med at tilf\u00f8je en TOC til ethvert Ghost-tema ved hj\u00e6lp af TOCBOT, et JavaScript-plugin, der automatisk genererer en TOC fra overskrifterne i dine indl\u00e6g. Integrering af TOCBOT i [&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-5005","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/5005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/comments?post=5005"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/5005\/revisions"}],"predecessor-version":[{"id":5006,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/5005\/revisions\/5006"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/media?parent=5005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/categories?post=5005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/tags?post=5005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}