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 HeaderbassoSettings > 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.
Lascia un commento