AJOUTER UN SOMMAIRE OU UNE TABLE DES MATIERES SUR BLOGGER
Utiliser une intelligence artificielle telle que ChatGpt ou Gemini ou une autre
Proposer le prompt suivant, et faire un test sur un site d'essai en ayant au préalable pris soin de faire les sauvegardes. Si tout se passe bien, passer sur le site principal, mais seulement après les sauvegardes
Créer un script pour un blog Blogger permettant de générer automatiquement une table des matières dynamique basée sur les balises H2, H3 et H4 présentes dans le contenu de chaque article. Le sommaire doit s’afficher uniquement sur les pages d’articles, grâce à la condition <b:if cond='data:view.isPost'>. Il doit apparaître automatiquement et sans intervention manuelle au chargement de l'article. Si l’ancre <a name="more"></a> est présente, le sommaire doit s’afficher juste après cette balise. Si l’ancre est absente, le sommaire doit apparaître après la balise dotée de la classe .post-body.
Le script doit être compatible avec le fichier XML du thème Blogger. Pour cela, il doit être encadré par des marqueurs CDATA. Le style du sommaire doit inclure un fond bleu clair ou gris et différencier visuellement les niveaux H2, H3 et H4 à l’aide d’effets tels que des indentations. Les liens doivent être cliquables, avec un effet au survol, comme un soulignement ou un changement de couleur.
Le script doit être inséré avant </body> et utiliser l’événement DOMContentLoaded pour garantir que le DOM est entièrement chargé avant son exécution. Enfin, il doit minimiser les modifications du DOM afin d’assurer de bonnes performances.
Le résultat attendu est un script JavaScript complet, enveloppé dans la condition <b:if cond='data:view.isPost'> et incluant les balises CDATA, accompagné du code CSS nécessaire pour styliser le sommaire.
ChatGpt
Voici un script JavaScript complet, enveloppé dans la condition <b:if cond='data:view.isPost'>, avec le style CSS nécessaire pour styliser la table des matières. Ce code peut être inséré dans le fichier XML de votre thème Blogger.
Explications :
- Structure dynamique :
- Le script parcourt les balises H2, H3 et H4 dans .post-body.
- Ajoute un ID unique à chaque titre pour permettre un lien d'ancrage.
- Génère une liste hiérarchique <ul> contenant les liens.
- Position du sommaire :
- Si l’ancre <a name="more"> est présente, le sommaire est inséré juste après.
- Sinon, il apparaît au début de .post-body.
- Style :
- Fond bleu clair avec bordure et coins arrondis.
- Les niveaux H2, H3 et H4 sont différenciés par une indentation visuelle et une hiérarchie.
- Performance :
- Utilise DOMContentLoaded pour attendre que le DOM soit chargé.
- Minimise les modifications DOM.
Insérez ce code avant </body> dans votre thème Blogger pour activer cette fonctionnalité.
<b:if cond='data:view.isPost'>
<script type="text/javascript">
<![CDATA[
document.addEventListener('DOMContentLoaded', function () {
// Fonction pour créer la table des matières
function createTableOfContents() {
const postBody = document.querySelector('.post-body');
if (!postBody) return;
const headers = postBody.querySelectorAll('h2, h3, h4');
if (headers.length === 0) return;
const toc = document.createElement('div');
toc.className = 'table-of-contents';
const tocTitle = document.createElement('h3');
tocTitle.textContent = 'Table des matières';
toc.appendChild(tocTitle);
const tocList = document.createElement('ul');
toc.appendChild(tocList);
headers.forEach((header, index) => {
const anchor = document.createElement('a');
const id = `toc-${index}`;
// Ajouter un ID aux titres pour les ancres
header.id = id;
anchor.href = `#${id}`;
anchor.textContent = header.textContent;
const listItem = document.createElement('li');
listItem.className = `toc-level-${header.tagName.toLowerCase()}`;
listItem.appendChild(anchor);
tocList.appendChild(listItem);
});
// Insérer le sommaire après <a name="more"> ou .post-body
const moreAnchor = postBody.querySelector('a[name="more"]');
if (moreAnchor) {
moreAnchor.insertAdjacentElement('afterend', toc);
} else {
postBody.insertAdjacentElement('afterbegin', toc);
}
}
// Créer le sommaire
createTableOfContents();
});
]]>
</script>
<style>
<![CDATA[
.table-of-contents {
background-color: #f0f8ff; /* Bleu clair */
border: 1px solid #ccc;
padding: 10px;
margin: 20px 0;
border-radius: 5px;
}
.table-of-contents h3 {
margin-top: 0;
font-size: 1.2em;
color: #333;
}
.table-of-contents ul {
list-style: none;
padding-left: 0;
}
.table-of-contents li {
margin: 5px 0;
}
.table-of-contents .toc-level-h2 {
font-weight: bold;
}
.table-of-contents .toc-level-h3 {
margin-left: 20px;
}
.table-of-contents .toc-level-h4 {
margin-left: 40px;
}
.table-of-contents a {
text-decoration: none;
color: #007bff;
}
.table-of-contents a:hover {
text-decoration: underline;
color: #0056b3;
}
]]>
</style>
</b:if>
blogsurblogger.blogspot.com 
