Bootstrap – Ajout d’une table des matières navigable

Écrit par Pascal Bangerter

 

Vous désirez écrire un article ayant plusieurs chapitres.
Pour faciliter sa lecture vous désirez y ajouter une table des matières permettant, en cliquant sur un des items de la table, de se positionner sur la chapitre désiré.

Cette article va vous apporter une solution en utilisant un peu d'HTML et des classes Bootstrap (l'article démontrant la solution proposée).


Table des matières


Prérequis

Votre thème Joomla doit être compatible Bootstrap !

Notion de lien et d'ancre en HTML

En HTML un lien (Url) désigne une chaîne de caractères utilisée pour adresser les ressources d'internet (page d'un site web, document, etc.).

Exemple classique d'URL : un texte pointant sur une adresse web - texte : monsite - adresse : https://www.pbasoft.com = monsite

Ces Url peuvent également adresser un emplacement spécifique à l'intérieur d'une page web pour autant que l'on puisse identifier cet emplacement.
Cet emplacement doit être une balise HTML du genre <h1>, <p>, <hr /> etc. auquel nous lui assignerons un identifiant (ancre)

id="[nom de l'ancre]"

Nous pourrons ensuite créer notre URL pointant vers cet emplacement.

Exemple d'URL pointant sur ce chapitre (l'identifiant "notion" précédé d'un # = #notion ayant été ajouté dans la balise du trait juste au-dessus du chapitre) Notion de lien et d'ancre en HTML

Un peu compliqué ? Les chapitres suivant vont fournir des explications pas-pas pour la création d'une tables des matières.


Division des chapitres

Pour diviser les chapitres on va utiliser une ligne horizontale. Ce qui sera bien pratique par la suite pour lui assigner une ancre.

En HTML, une ligne horizontale s'écrit avec la balise <hr /> mais dans notre cas nous nous contenterons d’insérer ces lignes grâce au menu de notre éditeur (menu -> Insérer -> Ligne horizontale).

 


Insertion des ancres

Pour insérer nos ancres on va passer en mode "HTML"

Remarque : l'insertion d'ancre via l'éditeur ne fonctionne pas sur les balise <hr /> des lignes horizontales.

Basculer l'éditeur en mode HTML en cliquant sur le bouton (situer juste dessous l'éditeur à droite)

Descendez dans votre texte jusqu'à la balise HTML <hr /> situé au-dessus de votre premier chapitre et ajoutez-lui un identifiant.

Exemple <hr id="notion" />

Répéter l'opération sur les autres balises situées justes au-dessus de vos chapitres.

Attention un identifiant doit toujours être unique !

Constitution de la table des matières

Pour constituer notre table des matières on va utiliser la notion de "Linked Items" Bootstrap.

Basculer l'éditeur en mode HTML en cliquant sur le bouton (situer juste dessous l'éditeur à droite)

  • Insérez le texte "Table des matières" ou , "<h3>Table des matières</h3>" (<h3> étant la balise HTML de mise en forme "Titre 3").
  • Pressez la touche [Entrée] (clavier français) ou  pour les autres claviers.
  • Insérez ensuite un conteneur HTML <div> en lui assignant la classe Bootstrap "list-group".
<div class="list-group">
</div>

Dans ce conteneur ajoutez vos balises de lien internet <a> en assignant la classe Bootstrap "list-group-Item" et en pointant sur vos ancres.

Ce qui va vous donnez quelque chose comme ça :

<div class="list-group">
 <a class="list-group-item" href="#notion">Notion de lien et d'ancre en HTML</a>
 <a class="list-group-item" href="#divchap">Division des chapitres</a>
 <a class="list-group-item" href="#ancre">Insertion des ancres</a>
 <a class="list-group-item" href="#table">Constitution de la table des matières</a>
</div>

Si vous effectuez un "aperçu" vous devriez voir quelque chose ressemblant à ça.


Conclusion

Si vous désirez plus d'information sur :

Catégorie :