Créer un sommaire automatique pour vos pages en JS :
- Mettre une div pour recevoir le code généré par le JS
- Choisir dans quelle div vous souhaitez chercher vos titres
function generateSlug(text) {
return text.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "")
.toLowerCase()
.replace(/[^\w\s]/g, '')
.replace(/\s+/g, '-');
}
// Fonction pour créer la table des matières
function createTableOfContents() {
// Sélectionner tous les titres de niveau 2 dans la div page-body
const pageBody = document.querySelector('.page-body');
const headings = pageBody.querySelectorAll('h2');
// Sélectionner la div #toc et la liste UL où insérer les liens
const toc = document.querySelector('#toc ul');
// Parcourir tous les <h2>
headings.forEach((heading, index) => {
// Générer une slug (ID) à partir du texte du titre
const headingText = heading.textContent;
const slug = generateSlug(headingText);
// Ajouter une ID au titre <h2> avec la slug générée
heading.id = slug;
// Créer un élément <li> pour la table des matières
const listItem = document.createElement('li');
// Créer un lien <a> qui pointe vers le titre avec l'ID
const link = document.createElement('a');
link.href = `#${slug}`;
link.textContent = headingText;
// Ajouter le lien à l'élément <li>
listItem.appendChild(link);
// Ajouter l'élément <li> à la table des matières (dans l'ul)
toc.appendChild(listItem);
});
}
// Appeler la fonction pour créer la table des matières
createTableOfContents();