Een inhoudsopgave (TOC) toevoegen aan uw Ghost-thema: een stapsgewijze handleiding

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.

TOCBOT integreren in Ghost

TOCBOT construeert efficiënt een TOC van uw postkoppen. Volg deze eenvoudige stappen voor installatie:

Meld u aan bij uw Ghost-beheerdersdashboard en ga naar Settings > Code injection.
Voeg in het Site Headergebied het vereiste TOCBOT-script en -stijlblad in:

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css"rel="stylesheet">

Initialiseer vervolgens Site FooterTOCBOT in de sectie met behulp van het volgende script:

<script> document.addEventListener('DOMContentLoaded', function() { tocbot.init({ tocSelector: '.toc', contentSelector: '.post-content', headingSelector: 'h1, h2, h3, h4', scrollSmooth: true }); }); </script>

Zorg ervoor dat de contentSelectorovereenkomt met de klasse die in uw thema is aangewezen voor postinhoud. Veelgebruikte klassen zijn .post-content, .gh-content, of .c-content.

Sla ten slotte uw wijzigingen op in de Code injectioninstellingen.

De TOC-placeholder in berichten invoegen

Om de inhoudsopgave in uw artikelen te tonen, moet u op de gewenste locatie een tijdelijke aanduiding plaatsen:

Bewerk een bericht waarin u de inhoudsopgave wilt opnemen.
Voeg een HTML-kaart toe op de gewenste plek door deze /htmlin de editor te typen.
Voeg de volgende code toe aan de HTML-kaart:

<div class="toc"></div>

Dit stukje code creëert 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.

Het uiterlijk van de inhoudsopgave aanpassen

U kunt het uiterlijk van de inhoudsopgave personaliseren, zodat deze beter aansluit bij het ontwerp van uw thema:

Voeg in het Site Headeronderstaande gedeelte Settings > Code injectionaangepaste CSS-stijlen toe, ingesloten in een <style>tag:

<style> . toc { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; border-radius: 5px; } . toc a { text-decoration: none; color: #333; } . toc a:hover { text-decoration: underline; } </style>

U kunt deze stijlen naar eigen wens aanpassen.

Wijzigen voor verschillende thema’s

Omdat thema’s verschillende klassenamen voor inhoudssecties kunnen gebruiken, moet u ervoor zorgen dat de contentSelectorin de TOCBOT-instellingen overeenkomt met de inhoudsklasse van uw thema:

Inspecteer uw thema door te beginnen met een open bericht.
Klik met de rechtermuisknop op de inhoud van het bericht en kies ervoor Inspectom de ontwikkelaarstools van uw browser te openen.
Zoek de klassenaam die is gekoppeld aan het element dat de inhoud van uw bericht bevat, bijvoorbeeld .post-content.

Zorg ervoor dat u contentSelectorhet TOCBOT-script bijwerkt op basis van wat u vindt.

Een Sticky TOC maken

Om de inhoudsopgave zichtbaar te houden terwijl uw lezers scrollen, kunt u deze als ‘sticky’ instellen:

Voeg in de Site Headerdeze CSS toe binnen een <style>tag:

<style> . toc { position: sticky; top: 20px; } </style>

Hierdoor wordt de inhoudsopgave ten opzichte van het viewport gepositioneerd, zodat deze zichtbaar blijft terwijl gebruikers door het bericht scrollen.

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.

Bron