Comment insérer des liens internes sur une page ou créer une table des matières

Benwa Mis à jour le par Benwa

Pour créer des pages avec l'éditeur de code, vous avez besoin de la permission "Créer de nouvelles pages".

Lorsque vous créez une page avec l'éditeur de code, il est courant de vouloir ajouter des "liens d'ancrage", ou des liens qui dirigent directement le lecteur vers le contenu plus bas sur la page. Par exemple, vous pouvez créer une table des matières en haut de la page pour permettre à votre lecteur d'accéder directement à une section spécifique.

Pour des raisons de sécurité, Opendatasoft interdit d'utiliser JavaScript pour ce faire, mais il est possible de créer ce type de lien sans utiliser JavaScript (bien que pour utiliser l'éditeur de code, vous devrez utiliser du HTML de base).

Cet article explique comment insérer des liens internes dans votre page, avec quelques exemples tirés d'autres portails Opendatasoft.

Créer et ancrer le lien

  1. Tout d'abord, vous devez identifier où vous voulez que le lien aille. C'est là que vous posez votre « ancre ». Ce sont généralement les titres des différentes sections de votre page.
    Pour cela, vous définissez un attribut id où vous souhaitez pouvoir envoyer l'utilisateur. Dans ce cas, dans un h2, vous ajoutez l'identifiant "nom de l'ancre"
    <h2 id="anchor-name">Section name</h2>
  2. Ensuite, une fois que vous avez déposé votre ancre, vous pouvez créer un lien vers celle-ci, et ainsi amener votre utilisateur directement à ce contenu. En HTML, pour créer un lien vers un identifiant, vous utilisez le signe dièse ("#") suivi du nom de l'ancre.
    <a href="#anchor-name">Go to the section with the anchor "anchor-name"</a>
    N'oubliez pas que le "#" précède le nom de l'ancre dans votre lien, mais pas dans l'identifiant lui-même.

Création d'une table des matières

En utilisant les ancres de cette manière, vous pouvez facilement ajouter une table des matières cliquable.

  1. Pour chaque section pertinente, définissez l'attribut id de la manière qui vous convient le mieux. Ici, nous les avons appelés génériquement "title1", "title2" et "title3 Notez que l'identifiant ne doit pas nécessairement être le même que le titre réel.
 <h2 id="title1" >Lorem ipsum</h2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 <h2 id="title2" >Dolore eu fugiat</h2>
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 <h2 id="title3" >Vitae elementum</h2>
 Integer dignissim venenatis lacus, vitae elementum ante mollis quis. Etiam vehicula neque nec felis maximus lobortis.
  1. Ensuite, afin de créer la table des matières, vous devez insérer les liens nécessaires.
 <span>
 <b>Table of contents</b><br/>
 <a href="#title1">Lorem ipsum</a><br/>
 <a href="#title2">Dolore eu fugiat</a><br/>
 <a href="#title3">Vitae elementum</a>
 </span>
Pour les longues pages, les sites Web ajoutent souvent un lien en bas de la page vers une ancre en haut, donnant ainsi à votre lecteur un moyen de revenir en haut sans avoir à faire défiler.

Quelques exemples

Voici deux portails de données avec ces types de liens :

Le code HTML en action

Ici vous pouvez voir le résultat du code HTML ci-dessus :

Table of contents
Lorem ipsum
Dolore eu fugiat
Vitae elementum

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dolore eu fugiat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Vitae elementum

Integer dignissim venenatis lacus, vitae elementum ante mollis quis. Etiam vehicula neque nec felis maximus lobortis.

Êtes-vous satisfait ?

Pages de contenu : idées, conseils et ressources

Partager et intégrer une page de contenu

Contactez-nous

Powered by HelpDocs (opens in a new tab)