Créer une table des matières automatique et masquable

Créer une table des matières automatique et masquable avec Jekyll mais sans plugin, avec quelques lignes de code JavaScript et CSS.

 Publié le 14 nov 2024 ·  ≤ 1 min de lecture

Mode opératoire

  • Télécharger le fichier toc.html depuis https://github.com/allejo/jekyll-toc/blob/master/_includes/toc.html
  • Charger ce fichier dans le répertoire _includes
  • Modifier le fichier correspondant au modèle des articles (_layouts/post.html dans mon cas)
    • Ajouter le structure accueillant la table des matières
    • Ajouter les lignes de code JavaScript
  • Ajouter les lignes de code CSS

Structure accueillant la table des matières

<article class="message">
  <div class="message-header is-clickable" id="header_toc">
    <span>Table des matières</span>
    <button class="fa-solid fa-arrows-left-right-to-line is-right" id="toggle_toc"></button>
  </div>
  <div class="message-body" id="my_toc">
    {% include toc.html html=content sanitize=true ordered=true h_min=2 h_max=5 %}
  </div>
</article>

Éléments à ajouter à la feuille de style

.message {
  width: 100%;
  transition: width 0.5s ease;
}

.message.collapsed {
  width: 5%;
  min-width: fit-content;
}

.message-header {
  white-space: nowrap !important;
  user-select: none;
}

.is-hidden {
  display: none;
}

Code JavaScript à ajouter à la page

<script>
document.getElementById("header_toc").addEventListener("click", toggle_toc);

function toggle_toc() {
  const tocBody = document.getElementById("my_toc");
  const article = document.querySelector(".message");
  
  tocBody.classList.toggle("is-hidden");   // Masquer/afficher le contenu
  article.classList.toggle("collapsed");    // Réduire/agrandir la largeur
}

document.getElementById("header_toc").click();
</script>

Résultat

Vous pouvez observez le résultat obtenu en regardant la table des matières de cet article.

Sources

Articles similaires

Partage et commentaires

Partager cet article sur :  Mastodon  X (Twitter)  Facebook  LinkedIn  Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/​Fediverse).