{"id":5000,"date":"2024-10-24T13:45:33","date_gmt":"2024-10-24T13:45:33","guid":{"rendered":"https:\/\/howtogeek.blog\/it\/?p=5000"},"modified":"2024-10-24T13:45:33","modified_gmt":"2024-10-24T13:45:33","slug":"adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/it\/adding-a-table-of-contents-toc-to-your-ghost-theme-a-stepbystep-guide\/","title":{"rendered":"Aggiungere un indice (TOC) al tuo tema Ghost: una guida passo passo"},"content":{"rendered":"<p>Incorporare un indice (TOC) nel tuo blog Ghost migliora significativamente l&#8217;esperienza del lettore facilitando una navigazione fluida attraverso articoli pi\u00f9 lunghi. Questo tutorial ti guider\u00e0 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.<\/p>\n<h2 id=\"setting-up-tocbot-in-ghost\">Integrazione di TOCBOT in Ghost<\/h2>\n<p>TOCBOT costruisce in modo efficiente un TOC dalle intestazioni dei tuoi post. Segui questi semplici passaggi per l&#8217;installazione:<\/p>\n<ul>\n<li>Accedi alla dashboard di amministrazione di Ghost e vai su <code>Settings &gt; Code injection<\/code>.<\/li>\n<li>Nell&#8217;area <code>Site Header<\/code>, inserisci lo script TOCBOT e il foglio di stile richiesti:<\/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>Successivamente, nella <code>Site Footer<\/code>sezione, inizializzare TOCBOT utilizzando il seguente 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>Assicurati che <code>contentSelector<\/code>sia allineato con la classe designata nel tuo tema per il contenuto del post. Le classi comunemente utilizzate includono <code>.post-content<\/code>, <code>.gh-content<\/code>, o <code>.c-content<\/code>.<\/p>\n<ul>\n<li>Infine, salva le modifiche nelle <code>Code injection<\/code>impostazioni.<\/li>\n<\/ul>\n<h2 id=\"adding-the-toc-placeholder-to-posts\">Inserimento del segnaposto TOC nei post<\/h2>\n<p>Per mostrare l&#8217;indice nei tuoi articoli, dovrai posizionare un segnaposto nella posizione desiderata:<\/p>\n<ul>\n<li>Modifica un post in cui desideri includere l&#8217;indice.<\/li>\n<li>Aggiungi una scheda HTML nel punto che preferisci digitando <code>\/html<\/code>nell&#8217;editor.<\/li>\n<li>Includi il seguente codice nella scheda HTML:<\/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>Questo pezzo di codice stabilisce uno spazio per il TOC. Una volta che il post \u00e8 stato consultato, TOCBOT riempir\u00e0 questo spazio con il TOC generato dinamicamente derivato dai titoli dei tuoi contenuti.<\/p>\n<h2 id=\"styling-the-toc\">Personalizzazione dell&#8217;aspetto del sommario<\/h2>\n<p>Puoi personalizzare l&#8217;aspetto del TOC per adattarlo meglio al design del tuo tema:<\/p>\n<ul>\n<li>In <code>Site Header<\/code>basso <code>Settings &gt; Code injection<\/code>, aggiungi stili CSS personalizzati racchiusi tra un <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>Sentiti libero di adattare questi stili alle tue preferenze.<\/p>\n<h2 id=\"adjusting-for-different-themes\">Modifica per vari temi<\/h2>\n<p>Poich\u00e9 i temi possono utilizzare nomi di classe diversi per le sezioni di contenuto, assicurati che <code>contentSelector<\/code>nella configurazione di TOCBOT corrisponda alla classe di contenuto del tuo tema:<\/p>\n<ul>\n<li>Esamina il tuo tema iniziando da un post aperto.<\/li>\n<li>Fai clic con il pulsante destro del mouse sul contenuto del post e scegli <code>Inspect<\/code>di accedere agli strumenti per sviluppatori del tuo browser.<\/li>\n<li>Trova il nome della classe associata all&#8217;elemento che contiene il contenuto del tuo post, ad esempio <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>Assicurati di aggiornare lo <code>contentSelector<\/code>script TOCBOT in base a ci\u00f2 che trovi.<\/li>\n<\/ul>\n<h2 id=\"making-the-toc-sticky\">Creazione di un indice fisso<\/h2>\n<p>Per mantenere visibile l&#8217;indice mentre i tuoi lettori scorrono la pagina, puoi impostarlo in modo che sia fisso:<\/p>\n<ul>\n<li>In <code>Site Header<\/code>, aggiungi questo CSS all&#8217;interno di un <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>In questo modo l&#8217;indice verr\u00e0 posizionato in relazione alla finestra di visualizzazione, assicurando che rimanga visibile mentre gli utenti scorrono il post.<\/p>\n<p>Applicando queste istruzioni, puoi arricchire il tuo blog Ghost con un indice funzionale, migliorando cos\u00ec la navigazione e l&#8217;interazione dei lettori nei tuoi post.<\/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\">Fonte<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Incorporare un indice (TOC) nel tuo blog Ghost migliora significativamente l&#8217;esperienza del lettore facilitando una navigazione fluida attraverso articoli pi\u00f9 lunghi. Questo tutorial ti guider\u00e0 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 [&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":[130],"class_list":["post-5000","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/5000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/comments?post=5000"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/5000\/revisions"}],"predecessor-version":[{"id":5001,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/5000\/revisions\/5001"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/media?parent=5000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/categories?post=5000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/tags?post=5000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}