Legge til en innholdsfortegnelse (TOC) til spøkelsestemaet ditt: en trinn-for-trinn-veiledning

Å inkludere en innholdsfortegnelse (TOC) i Ghost-bloggen din forbedrer leserens opplevelse betraktelig ved å forenkle sømløs navigering gjennom lengre artikler. Denne opplæringen vil guide deg gjennom prosessen med å legge til en innholdsfortegnelse til et hvilket som helst Ghost-tema ved å bruke TOCBOT, en JavaScript-plugin som automatisk genererer en innholdsfortegnelse fra overskriftene i innleggene dine.

Integrering av TOCBOT i Ghost

TOCBOT konstruerer effektivt en innholdsfortegnelse fra innleggsoverskriftene dine. Følg disse enkle trinnene for installasjon:

Logg på Ghost-admin-dashbordet og gå til Settings > Code injection.
I Site Headerområdet setter du inn det nødvendige TOCBOT-skriptet og stilarket:

<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">

Deretter, i Site Footerdelen, initialiser TOCBOT ved å bruke følgende skript:

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

Sørg for at det contentSelectorstemmer overens med klassen som er angitt i temaet ditt for innleggsinnhold. Vanlig brukte klasser inkluderer .post-content, .gh-content, eller .c-content.

Til slutt lagrer du endringene i Code injectioninnstillingene.

Sette inn TOC-plassholderen i innlegg

For å vise frem innholdsfortegnelsen i artiklene dine, må du plassere en plassholder på ønsket sted:

Rediger et innlegg der du ønsker å inkludere innholdsfortegnelsen.
Legg til et HTML-kort på stedet du foretrekker ved å skrive /htmli redigeringsprogrammet.
Ta med følgende kode i HTML-kortet:

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

Denne kodebiten etablerer en plass for innholdsfortegnelsen. Når innlegget er åpnet, vil TOCBOT fylle denne plassen med den dynamisk genererte innholdsfortegnelsen hentet fra innholdsoverskriftene dine.

Tilpasse TOC-utseendet

Du kan tilpasse utseendet til innholdsfortegnelsen for bedre å tilpasses temadesignet ditt:

I Site Headerunder Settings > Code injectionlegger du til egendefinerte CSS-stiler omsluttet av en <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>

Juster gjerne disse stilene for å passe dine preferanser.

Modifisering for ulike temaer

Siden temaer kan bruke forskjellige klassenavn for innholdsseksjoner, sørg for at contentSelectori TOCBOT-oppsettet samsvarer med temaets innholdsklasse:

Inspiser temaet ditt ved å starte med et åpent innlegg.
Høyreklikk på innleggets innhold og velg Inspectå få tilgang til nettleserens utviklerverktøy.
Finn klassenavnet knyttet til elementet som inneholder innleggsinnholdet ditt, for eksempel .post-content.

Sørg for å oppdatere contentSelectori TOCBOT-skriptet basert på det du finner.

Opprette en Sticky TOC

For å holde innholdsfortegnelsen synlig mens leserne ruller, kan du sette den til å være klissete:

I Site Header, legg til denne CSS i en <style>tag:

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

Dette vil plassere innholdsfortegnelsen i forhold til visningsporten, og sikre at den forblir i sikte mens brukere ruller gjennom innlegget.

Ved å implementere disse instruksjonene kan du berike Ghost-bloggen din med en funksjonell innholdsfortegnelse, og dermed forbedre navigasjonen og leserinteraksjonen gjennom innleggene dine.