{"id":4915,"date":"2024-10-24T13:45:12","date_gmt":"2024-10-24T13:45:12","guid":{"rendered":"https:\/\/howtogeek.blog\/nl\/?p=4915"},"modified":"2024-10-24T13:45:12","modified_gmt":"2024-10-24T13:45:12","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/nl\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Een inhoudsopgave (TOC) toevoegen aan uw Ghost-thema: een stapsgewijze handleiding"},"content":{"rendered":"<p>Het opnemen van een inhoudsopgave (TOC) in uw Ghost-blog verbetert de ervaring van de lezer aanzienlijk door naadloze navigatie door langere artikelen te vergemakkelijken. Deze tutorial begeleidt u door het proces van het toevoegen van een TOC aan elk Ghost-thema met behulp van TOCBOT, een JavaScript-plug-in die automatisch een TOC genereert uit de koppen in uw berichten.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">TOCBOT integreren in Ghost<\/h2>\n<p>TOCBOT construeert effici\u00ebnt een TOC van uw postkoppen. Volg deze eenvoudige stappen voor installatie:<\/p>\n<ul>\n<li>Meld u aan bij uw Ghost-beheerdersdashboard en ga naar <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Voeg in het <code>Site Header<\/code>gebied het vereiste TOCBOT-script en -stijlblad in:<\/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>Initialiseer vervolgens <code>Site Footer<\/code>TOCBOT in de sectie met behulp van het volgende 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>Zorg ervoor dat de <code>contentSelector<\/code>overeenkomt met de klasse die in uw thema is aangewezen voor postinhoud. Veelgebruikte klassen zijn <code>.post-content<\/code>, <code>.gh-content<\/code>, of <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Sla ten slotte uw wijzigingen op in de <code>Code injection<\/code>instellingen.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">De TOC-placeholder in berichten invoegen<\/h2>\n<p>Om de inhoudsopgave in uw artikelen te tonen, moet u op de gewenste locatie een tijdelijke aanduiding plaatsen:<\/p>\n<ul>\n<li>Bewerk een bericht waarin u de inhoudsopgave wilt opnemen.<\/li>\n<li>Voeg een HTML-kaart toe op de gewenste plek door deze <code>\/html<\/code>in de editor te typen.<\/li>\n<li>Voeg de volgende code toe aan de HTML-kaart:<\/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>Dit stukje code cre\u00ebert een ruimte voor de TOC. Zodra de post wordt geopend, vult TOCBOT deze ruimte met de dynamisch gegenereerde TOC die is afgeleid van uw contentkoppen.<\/p>\n<h2 id=\"styling-the-toc\">Het uiterlijk van de inhoudsopgave aanpassen<\/h2>\n<p>U kunt het uiterlijk van de inhoudsopgave personaliseren, zodat deze beter aansluit bij het ontwerp van uw thema:<\/p>\n<ul>\n<li>Voeg in het <code>Site Header<\/code>onderstaande gedeelte <code>Settings &gt; Code injection<\/code>aangepaste CSS-stijlen toe, ingesloten in een <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>U kunt deze stijlen naar eigen wens aanpassen.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Wijzigen voor verschillende thema&#8217;s<\/h2>\n<p>Omdat thema&#8217;s verschillende klassenamen voor inhoudssecties kunnen gebruiken, moet u ervoor zorgen dat de <code>contentSelector<\/code>in de TOCBOT-instellingen overeenkomt met de inhoudsklasse van uw thema:<\/p>\n<ul>\n<li>Inspecteer uw thema door te beginnen met een open bericht.<\/li>\n<li>Klik met de rechtermuisknop op de inhoud van het bericht en kies ervoor <code>Inspect<\/code>om de ontwikkelaarstools van uw browser te openen.<\/li>\n<li>Zoek de klassenaam die is gekoppeld aan het element dat de inhoud van uw bericht bevat, bijvoorbeeld <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>Zorg ervoor dat u <code>contentSelector<\/code>het TOCBOT-script bijwerkt op basis van wat u vindt.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Een Sticky TOC maken<\/h2>\n<p>Om de inhoudsopgave zichtbaar te houden terwijl uw lezers scrollen, kunt u deze als &#8216;sticky&#8217; instellen:<\/p>\n<ul>\n<li>Voeg in de <code>Site Header<\/code>deze CSS toe binnen een <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>Hierdoor wordt de inhoudsopgave ten opzichte van het viewport gepositioneerd, zodat deze zichtbaar blijft terwijl gebruikers door het bericht scrollen.<\/p>\n<p>Door deze instructies te volgen, kunt u uw Ghost-blog verrijken met een functionele inhoudsopgave. Zo verbetert u de navigatie en interactie van de lezer met uw berichten.<\/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\">Bron<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het opnemen van een inhoudsopgave (TOC) in uw Ghost-blog verbetert de ervaring van de lezer aanzienlijk door naadloze navigatie door langere artikelen te vergemakkelijken. Deze tutorial begeleidt u door het proces van het toevoegen van een TOC aan elk Ghost-thema met behulp van TOCBOT, een JavaScript-plug-in die automatisch een TOC genereert uit de koppen in [&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-4915","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/posts\/4915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/comments?post=4915"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/posts\/4915\/revisions"}],"predecessor-version":[{"id":4916,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/posts\/4915\/revisions\/4916"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/media?parent=4915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/categories?post=4915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/nl\/wp-json\/wp\/v2\/tags?post=4915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}