Aggiungere un indice (TOC) al tuo tema Ghost: una guida passo passo

Incorporare un indice (TOC) nel tuo blog Ghost migliora significativamente l’esperienza del lettore facilitando una navigazione fluida attraverso articoli più lunghi. Questo tutorial ti guiderà attraverso il processo di aggiunta di un TOC a qualsiasi tema Ghost utilizzando TOCBOT, un plugin JavaScript che genera automaticamente un TOC dalle intestazioni presenti nei tuoi post.

Integrazione di TOCBOT in Ghost

TOCBOT costruisce in modo efficiente un TOC dalle intestazioni dei tuoi post. Segui questi semplici passaggi per l’installazione:

Accedi alla dashboard di amministrazione di Ghost e vai su Settings > Code injection.
Nell’area Site Header, inserisci lo script TOCBOT e il foglio di stile richiesti:

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

Successivamente, nella Site Footersezione, inizializzare TOCBOT utilizzando il seguente script:

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

Assicurati che contentSelectorsia allineato con la classe designata nel tuo tema per il contenuto del post. Le classi comunemente utilizzate includono .post-content, .gh-content, o .c-content.

Infine, salva le modifiche nelle Code injectionimpostazioni.

Inserimento del segnaposto TOC nei post

Per mostrare l’indice nei tuoi articoli, dovrai posizionare un segnaposto nella posizione desiderata:

Modifica un post in cui desideri includere l’indice.
Aggiungi una scheda HTML nel punto che preferisci digitando /htmlnell’editor.
Includi il seguente codice nella scheda HTML:

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

Questo pezzo di codice stabilisce uno spazio per il TOC. Una volta che il post è stato consultato, TOCBOT riempirà questo spazio con il TOC generato dinamicamente derivato dai titoli dei tuoi contenuti.

Personalizzazione dell’aspetto del sommario

Puoi personalizzare l’aspetto del TOC per adattarlo meglio al design del tuo tema:

In Site Headerbasso Settings > Code injection, aggiungi stili CSS personalizzati racchiusi tra un <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>

Sentiti libero di adattare questi stili alle tue preferenze.

Modifica per vari temi

Poiché i temi possono utilizzare nomi di classe diversi per le sezioni di contenuto, assicurati che contentSelectornella configurazione di TOCBOT corrisponda alla classe di contenuto del tuo tema:

Esamina il tuo tema iniziando da un post aperto.
Fai clic con il pulsante destro del mouse sul contenuto del post e scegli Inspectdi accedere agli strumenti per sviluppatori del tuo browser.
Trova il nome della classe associata all’elemento che contiene il contenuto del tuo post, ad esempio .post-content.

Assicurati di aggiornare lo contentSelectorscript TOCBOT in base a ciò che trovi.

Creazione di un indice fisso

Per mantenere visibile l’indice mentre i tuoi lettori scorrono la pagina, puoi impostarlo in modo che sia fisso:

In Site Header, aggiungi questo CSS all’interno di un <style>tag:

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

In questo modo l’indice verrà posizionato in relazione alla finestra di visualizzazione, assicurando che rimanga visibile mentre gli utenti scorrono il post.

Applicando queste istruzioni, puoi arricchire il tuo blog Ghost con un indice funzionale, migliorando così la navigazione e l’interazione dei lettori nei tuoi post.

Fonte