Sommaire automatique pour Joomla

Pour créer un sommaire automatique en utilisant jQuery, vous pouvez suivre les étapes suivantes :

1. Créez une structure HTML pour votre contenu avec des balises <h1>, <h2>, <h3> etc. pour définir les titres de section.

<div class="content">
<h1>Titre de la section 1</h1>
<p>Contenu de la section 1</p>
<h2>Titre de la sous-section 1.1</h2>
<p>Contenu de la sous-section 1.1</p>
<h2>Titre de la sous-section 1.2</h2>
<p>Contenu de la sous-section 1.2</p>
<h1>Titre de la section 2</h1>
<p>Contenu de la section 2</p>
<h2>Titre de la sous-section 2.1</h2>
<p>Contenu de la sous-section 2.1</p>
<h2>Titre de la sous-section 2.2</h2>
<p>Contenu de la sous-section 2.2</p>
</div>

2. Ajoutez un élément de liste pour chaque titre de section en utilisant jQuery. Vous pouvez utiliser la méthode each() pour parcourir tous les titres de section et créer des éléments de liste pour eux, et la méthode appendTo() pour ajouter les éléments de liste à une liste de navigation.

$(function() {
var toc = $('<ul>');
$('.content :header').each(function(i, header) {
var level = header.nodeName.replace(/h/i, '');
var text = $(header).text();
var id = 'heading-' + i;
$(header).attr('id', id);
toc.append($('<li>').append($('<a>').text(text).attr('href', '#' + id)).addClass('level-' + level));
});
toc.appendTo('body');
});

3. Appliquez un style CSS pour mettre en forme la liste de navigation et ancrer les éléments de liste aux titres de section correspondants.

ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: #000;
}

.level-1 a {
font-weight: bold;
font-size: 1.2em;
display: block;
padding: 5px;
}

.level-2 a {
font-weight: normal;
font-size: 1em;
padding-left: 10px;
}

.level-3 a {
font-weight: normal;
font-size: 0.9em;
padding-left: 20px;
}

.content :target {
background-color: #ffe;
}

Cela va créer une liste de navigation avec des liens ancrés aux titres de section correspondants. Les titres de section sont automatiquement récupérés et transformés en éléments de liste à l'aide de jQuery. Vous pouvez personnaliser le style de la liste de navigation et les règles d'ancrage des éléments de liste en modifiant le CSS.