Sur mon blog « Carnet Pao », je souhaitai voir apparaitre une table des matières en début de certains longs billets. Vous pouvez voir le résultat sur cette page.

  • D’un point de vue rédactionnelle, il faut structurer son texte avec différents titres de niveaux (ou header).
  • Ensuite, utiliser le script Jquery:planize conçu par Nicolas Perriault.
  • Recopier le script dans le répertoire js de son thème.
  • Le déclarer dans le fichier post.html entre les balises <head></head>, en insérant la ligne suivante :
<script type="text/javascript" 
src= "{{tpl:BlogThemeURL}}/js/planize.js" >
</script>
  • A chaque billet souhaité, insérer le code suivant :
<script type="text/javascript">
$(document).ready(function(){
$('.post *').planize({ 
min_level: 3,
generate_toc:true,
toc_elem:$('#toc'),
toc_title: 'Index',});
});
</script>
<div id="toc"></div>
...ici le contenu du billet...
  • Ensuite, éventuellement personnaliser (#toc, #toc ul li, #toc h4) via le fichier style.css.

Merci à Amalgame, Samuel Martin et Nicolas Perriault pour la mise en place.

EDIT 17/12/2009 : TomTom33 a rajouté des options à son plugin MultiToc ce qui permet de mettre en place facilement une table des matières d’un billet à la manière de Wikipédia