{"id":4905,"date":"2024-10-24T13:45:32","date_gmt":"2024-10-24T13:45:32","guid":{"rendered":"https:\/\/howtogeek.blog\/no\/?p=4905"},"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\/no\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Legge til en innholdsfortegnelse (TOC) til sp\u00f8kelsestemaet ditt: en trinn-for-trinn-veiledning"},"content":{"rendered":"<p>\u00c5 inkludere en innholdsfortegnelse (TOC) i Ghost-bloggen din forbedrer leserens opplevelse betraktelig ved \u00e5 forenkle s\u00f8ml\u00f8s navigering gjennom lengre artikler. Denne oppl\u00e6ringen vil guide deg gjennom prosessen med \u00e5 legge til en innholdsfortegnelse til et hvilket som helst Ghost-tema ved \u00e5 bruke TOCBOT, en JavaScript-plugin som automatisk genererer en innholdsfortegnelse fra overskriftene i innleggene dine.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integrering av TOCBOT i Ghost<\/h2>\n<p>TOCBOT konstruerer effektivt en innholdsfortegnelse fra innleggsoverskriftene dine. F\u00f8lg disse enkle trinnene for installasjon:<\/p>\n<ul>\n<li>Logg p\u00e5 Ghost-admin-dashbordet og g\u00e5 til <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>I <code>Site Header<\/code>omr\u00e5det setter du inn det n\u00f8dvendige TOCBOT-skriptet og stilarket:<\/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>Deretter, i <code>Site Footer<\/code>delen, initialiser TOCBOT ved \u00e5 bruke f\u00f8lgende skript:<\/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 klassen som er angitt i temaet ditt for innleggsinnhold. Vanlig brukte klasser inkluderer <code>.post-content<\/code>, <code>.gh-content<\/code>, eller <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Til slutt lagrer du endringene i <code>Code injection<\/code>innstillingene.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Sette inn TOC-plassholderen i innlegg<\/h2>\n<p>For \u00e5 vise frem innholdsfortegnelsen i artiklene dine, m\u00e5 du plassere en plassholder p\u00e5 \u00f8nsket sted:<\/p>\n<ul>\n<li>Rediger et innlegg der du \u00f8nsker \u00e5 inkludere innholdsfortegnelsen.<\/li>\n<li>Legg til et HTML-kort p\u00e5 stedet du foretrekker ved \u00e5 skrive <code>\/html<\/code>i redigeringsprogrammet.<\/li>\n<li>Ta med 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>Denne kodebiten etablerer en plass for innholdsfortegnelsen. N\u00e5r innlegget er \u00e5pnet, vil TOCBOT fylle denne plassen med den dynamisk genererte innholdsfortegnelsen hentet fra innholdsoverskriftene dine.<\/p>\n<h2 id=\"styling-the-toc\">Tilpasse TOC-utseendet<\/h2>\n<p>Du kan tilpasse utseendet til innholdsfortegnelsen for bedre \u00e5 tilpasses temadesignet ditt:<\/p>\n<ul>\n<li>I <code>Site Header<\/code>under <code>Settings &gt; Code injection<\/code>legger du til egendefinerte CSS-stiler omsluttet av en <code>&lt;style&gt;<\/code>tag:<\/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>Juster gjerne disse stilene for \u00e5 passe dine preferanser.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Modifisering for ulike temaer<\/h2>\n<p>Siden temaer kan bruke forskjellige klassenavn for innholdsseksjoner, s\u00f8rg for at <code>contentSelector<\/code>i TOCBOT-oppsettet samsvarer med temaets innholdsklasse:<\/p>\n<ul>\n<li>Inspiser temaet ditt ved \u00e5 starte med et \u00e5pent innlegg.<\/li>\n<li>H\u00f8yreklikk p\u00e5 innleggets innhold og velg <code>Inspect<\/code>\u00e5 f\u00e5 tilgang til nettleserens utviklerverkt\u00f8y.<\/li>\n<li>Finn klassenavnet knyttet til elementet som inneholder innleggsinnholdet ditt, for eksempel <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 \u00e5 oppdatere <code>contentSelector<\/code>i TOCBOT-skriptet basert p\u00e5 det du finner.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Opprette en Sticky TOC<\/h2>\n<p>For \u00e5 holde innholdsfortegnelsen synlig mens leserne ruller, kan du sette den til \u00e5 v\u00e6re klissete:<\/p>\n<ul>\n<li>I <code>Site Header<\/code>, legg til denne CSS i en <code>&lt;style&gt;<\/code>tag:<\/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 plassere innholdsfortegnelsen i forhold til visningsporten, og sikre at den forblir i sikte mens brukere ruller gjennom innlegget.<\/p>\n<p>Ved \u00e5 implementere disse instruksjonene kan du berike Ghost-bloggen din med en funksjonell innholdsfortegnelse, og dermed forbedre navigasjonen og leserinteraksjonen gjennom innleggene dine.<\/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>\u00c5 inkludere en innholdsfortegnelse (TOC) i Ghost-bloggen din forbedrer leserens opplevelse betraktelig ved \u00e5 forenkle s\u00f8ml\u00f8s navigering gjennom lengre artikler. Denne oppl\u00e6ringen vil guide deg gjennom prosessen med \u00e5 legge til en innholdsfortegnelse til et hvilket som helst Ghost-tema ved \u00e5 bruke TOCBOT, en JavaScript-plugin som automatisk genererer en innholdsfortegnelse fra overskriftene i innleggene dine. [&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-4905","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/4905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/comments?post=4905"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/4905\/revisions"}],"predecessor-version":[{"id":4906,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/4905\/revisions\/4906"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/media?parent=4905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/categories?post=4905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/tags?post=4905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}