Ressource avec sommaire

Sommaire

Comment remplir le sommaire ?

Cette ressource vous présente un exemple d’utilisation du bloc Gutenberg “Sommaire”.

Une fois le bloc “Sommaire” ajouté où vous le souhaitez, pour chaque titre que vous voulez voir apparaître dans le sommaire, rendez-vous dans le bloc d’édition “Avancé” à droite de l’écran :

Ajoutez la valeur “CLASSE(S) CSS ADDITIONNELLE(S)” : pv-sommaire
Ajoutez le nom de l’élément que vous souhaitez voir apparaître dans le sommaire, en respectant les règles suivantes :
- L’ancre HTML doit être unique
- Elle ne doit comporter que des caractères alphanumériques, de la ponctuation “?”, “!”…etc, des tirets “-” ou des underscores “_”
- En front, les tirets “-” seront remplacés par des espaces : l’ancre “Mon-titre” affichera “Mon titre”
- Pour afficher un tiret “-” le remplacer par un underscore “_” : l’ancre “Mon-sous_titre” affichera “Mon sous-titre”
- Pour ajouter un sous-titre de niveau 2, préfixer son nom par un tiret : “-Mon-sous_titre-niveau-02”
- Pour ajouter un sous-titre de niveau 2, préfixer son nom par un tiret : “–Mon-sous_titre-niveau-03”

ℹ️ Recommandation JETPULP : Nous recommandons de ne pas dépasser 3 niveaux de titres.

💡 Astuce : copier / coller le titre de votre section dans le champ “ANCRE HTML” pour remplacer automatiquement les espaces par les tirets “-“.

Retrouvez ci-dessous un exemple de remplissage.

Mon titre

Sed nec accumsan magna. Nunc nec suscipit dolor, vel accumsan magna. Etiam luctus blandit nulla, in interdum mi pharetra vitae. Donec euismod semper diam in elementum. Nam vel tortor lacus. Cras efficitur mi sed rutrum dictum. Vestibulum ac libero eget enim condimentum ultricies commodo et lectus. Praesent purus nisi, suscipit eu facilisis dapibus, efficitur at elit. Mauris auctor massa in urna mattis tempus. Vivamus iaculis leo id est eleifend laoreet. Vivamus suscipit, mi id ullamcorper efficitur, enim ipsum maximus sem, sit amet vehicula ante libero dignissim tellus. Pellentesque et lectus diam. Sed accumsan, orci vel maximus facilisis, nisl nibh luctus tellus, et pretium nibh mi vel sem. Duis a enim pulvinar magna dapibus mattis sed quis justo.

Quisque pretium neque ut sagittis posuere. Morbi sed malesuada mauris. Nulla facilisi. Nullam porta et eros vel ornare. Cras at venenatis lectus, eu volutpat nibh. Sed tortor mi, eleifend non mattis at, tincidunt eu sapien. Vestibulum eu nisl at ante tincidunt dictum quis sed mi.

Mon sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, vestibulum vitae accumsan et, porta in lorem. Etiam pulvinar mauris tortor. Phasellus molestie efficitur urna vel ornare. Vivamus pretium blandit maximus. Nullam vel viverra ex. Sed ut nibh ut justo fringilla dapibus. Nulla sollicitudin, risus a scelerisque porta, velit elit porta arcu, sit amet tincidunt nunc ex elementum risus. Curabitur gravida dolor lectus, quis lobortis mi sagittis non. Cras eget auctor dolor.

Mon second sous-titre

Mon titre H2

Duis eros massa, dignissim vel vulputate et, fringilla id est. Fusce tempor, lectus at egestas maximus, velit lacus auctor tellus, ac bibendum neque sapien id dui. Vivamus nisl quam, tincidunt sed pretium eget, congue in eros. Nam ut dolor erat. Nam mollis nibh vitae sodales convallis. Aliquam erat volutpat. Donec congue dolor sit amet orci eleifend, sit amet finibus sem faucibus. Donec mattis urna eu risus accumsan, sed faucibus dolor pulvinar. Fusce id nisi non turpis ullamcorper auctor. Nulla facilisi. Etiam dictum arcu quis erat dignissim, eget accumsan lorem hendrerit. Quisque sit amet aliquet nunc. Mauris condimentum, ligula tincidunt rhoncus placerat, nisl lectus eleifend mi, eget efficitur felis turpis sed nibh. Nunc tincidunt tristique lectus ullamcorper elementum. Duis sit amet orci venenatis, mollis nisl ut, aliquet velit. Donec tempor sem sit amet tristique venenatis.

Mon sous-titre H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, vestibulum vitae accumsan et, porta in lorem. Etiam pulvinar mauris tortor. Phasellus molestie efficitur urna vel ornare.