Come posso aggiungere un sommario automatico (Table of Contents) all'inizio dei post più lunghi?

Per aggiungere un sommario automatico (Table of Contents) all'inizio dei post più lunghi senza doverlo aggiornare a mano ogni volta, puoi combinare un blocco CSS coordinato con il tuo design (e la modalità scura) e un leggero script JavaScript che scansiona autonomamente i titoli (<h2> e <h3>) presenti nell'articolo.

1.Aggiungi la grafica del sommario:Stile CSS.

Accedi a Blogger, vai su Tema > Modifica HTML, individua il tag ]]></b:skin> e inserisci subito prima questo codice CSS per stilizzare il box del sommario:

CSS

/* Stile per il box del sommario automatico */
.toc-box {
  background-color: var(--card-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.toc-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--heading-color, #111827);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toc-box ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.toc-box li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.toc-box li ul {
  margin-top: 6px;
}

.toc-box a {
  color: var(--text-color, #2563eb);
  text-decoration: none;
  transition: color 0.2s ease;
}

.toc-box a:hover {
  color: #2563eb;
  text-decoration: underline;
}

Verifica: Il foglio di stile si integra con le variabili di colore e la modalità scura definite in precedenza.

2.Inserisci lo script di generazione automatica:Logica JavaScript.

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e incolla questo script. Si occuperà di cercare i titoli del post, assegnare loro un ID se non ce l'hanno e generare l'elenco puntato cliccabile:

HTML

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const tocContainer = document.getElementById("toc-container");
    if (!tocContainer) return;

    const postBody = document.querySelector(".post-body");
    if (!postBody) return;

    // Cerca tutti i titoli H2 e H3 all'interno del post
    const headings = postBody.querySelectorAll("h2, h3");
    if (headings.length === 0) {
      tocContainer.style.display = "none"; // Nasconde il box se non ci sono titoli
      return;
    }

    let tocList = document.createElement("ul");
    let currentLevelList = tocList;

    headings.forEach((heading, index) => {
      // Assegna un ID univoco al titolo se mancante
      if (!heading.id) {
        heading.id = "toc-heading-" + index;
      }

      let li = document.createElement("li");
      let a = document.createElement("a");
      a.href = "#" + heading.id;
      a.textContent = heading.textContent;
      li.appendChild(a);

      if (heading.tagName === "H2") {
        tocList.appendChild(li);
        currentLevelList = tocList;
      } else if (heading.tagName === "H3") {
        // Crea un sotto-elenco per i tag H3
        let lastLi = tocList.lastElementChild;
        if (lastLi && lastLi.tagName === "LI") {
          let subUl = lastLi.querySelector("ul") || document.createElement("ul");
          if (!lastLi.querySelector("ul")) {
            subUl.appendChild(li);
            lastLi.appendChild(subUl);
          } else {
            subUl.appendChild(li);
          }
        } else {
          tocList.appendChild(li);
        }
      }
    });

    // Aggiunge il titolo e l'elenco generato al contenitore
    let title = document.createElement("div");
    title.className = "toc-title";
    title.innerHTML = " Indice dei contenuti";

    tocContainer.className = "toc-box";
    tocContainer.appendChild(title);
    tocContainer.appendChild(tocList);
  });
</script>

Verifica: Lo script riconosce la struttura dell'articolo e compila l'indice in tempo reale all'apertura della pagina.

3.Come inserire il sommario negli articoli:Utilizzo nei post.

Quando scrivi un post lungo, ti basterà inserire questo semplice tag HTML nel punto esatto in cui desideri che compaia il sommario (solitamente all'inizio dell'articolo):

HTML

<div id="toc-container"></div>

Verifica: Se un articolo non contiene titoli (H2 o H3), lo script nasconderà automaticamente il riquadro per evitare spazi vuoti. Cliccando sulle voci del sommario, la pagina scorrerà fluidamente verso il paragrafo corrispondente.