Article original : How to Add a Table of Contents to Your Blog Post or Article
Fournir une table des matières aide à prévisualiser et à prioriser le contenu lors de la rédaction d'articles plus longs. Mais toutes les plateformes ne facilitent pas son ajout. Comment pouvons-nous en implémenter une lorsque nous manquons d'outils de première classe ?
Vous voulez passer directement au "comment" ? Passez à la section "comment" !
Ce que nous allons créer
Table des matières d'un article de blog
Pour les besoins de cet article, nous allons utiliser le gestionnaire de contenu de freeCodeCamp.org à des fins visuelles et de démonstration. freeCodeCamp/news utilise la plateforme de blogging Ghost au moment de la rédaction de cet article, mais cette méthode peut vraiment s'appliquer à n'importe quel article que vous écrivez.
Pourquoi est-ce utile ?
Fournir une table des matières aide à améliorer l'expérience des personnes lisant votre article.
Cela donne aux lecteurs un aperçu de l'article
Se lancer dans un article, au moins un long, peut être un grand engagement de temps. Personne ne veut passer 20 minutes de sa matinée pour se rendre compte qu'un article dans lequel il s'est plongé n'a pas réellement répondu à ses questions. Ou que c'est un réchauffé de quelque chose dont il est déjà un expert (bien que des perspectives différentes peuvent encore être utiles).
En fournissant cet aperçu, vous pouvez aider les gens à se faire une idée de ce à quoi s'attendre lorsqu'ils commencent à lire. Cela leur permet de prioriser leur temps avec l'autre liste d'articles qu'ils doivent lire.
Cela fournit des points d'ancrage pour sauter vers un contenu spécifique
Similaire à la fourniture d'un aperçu, peut-être que quelqu'un veut lire une partie spécifique de la page. Peut-être est-ce parce qu'il peut sauter les premiers morceaux d'un tutoriel ou qu'il arrive d'un lien qu'un collègue a partagé dans Slack.
Le point est, les gens peuvent utiliser la table des matières pour sauter vers les parties qui sont plus importantes pour eux.
Bonus : cela vous aide en tant qu'auteur
Fournir une table des matières peut ne pas aider pour de nombreuses raisons pratiques, mais c'est un outil supplémentaire pour vous aider à prioriser et à comprendre le contenu de votre article. Cela sert de plan de haut niveau auquel vous pouvez vous référer lorsque vous vous assurez que le flux de votre histoire a réellement du sens.
Ce qu'elle ne fait pas
Malheureusement, ce processus est manuel. Cette table des matières ne va pas se mettre à jour magiquement chaque fois que vous modifiez votre contenu. Assurez-vous donc d'être vigilant pendant le processus d'édition et de mettre à jour les liens brisés ou d'ajouter et de supprimer les modifications avant de publier.
Comment pouvons-nous ajouter une table des matières ?
En-têtes de contenu et liens d'ancrage
La clé de cette solution est d'utiliser les attributs id intégrés appliqués aux en-têtes de contenu dans le HTML lors de la création d'une page d'article. L'utilisation de ces attributs nous permet de créer un lien d'ancrage qui fera défiler la position de défilement du navigateur jusqu'à l'emplacement de l'élément avec cet id.
Un exemple de base du HTML ressemble à ceci :
<ul>
<li><a href="#my-id">Lien vers Mon ID</a></li>
</ul>
<article>
<p>Contenu très long</p>
<h2 id="my-id">Chose Importante</h2>
<p>Contenu important</p>
</article>
Dans l'exemple ci-dessus, nous pouvons voir que notre article contient du contenu de base (imaginez qu'il est beaucoup plus long que ci-dessus) avec un h2 qui suit avec notre contenu important.
En fournissant à notre h2 l'attribut id, nous pouvons maintenant créer un lien en définissant le href selon le modèle #[id] qui saura vers cet élément dans la page.
Maintenant, lors de la création de cela dans notre plateforme de blogging, nous n'avons pas nécessairement besoin de nous soucier d'écrire ce HTML. Mais nous devons comprendre comment trouver l'id afin de créer nos liens.
Trouver notre ID d'en-tête
Nous pouvons utiliser les outils de développement de notre navigateur (Chrome, Firefox) pour trouver assez facilement nos précieux attributs id afin de créer nos liens.
En utilisant votre navigateur préféré, trouvez le titre que vous souhaitez utiliser, faites un clic droit sur le texte, puis sélectionnez "Inspecter" (ou "Inspecter l'élément") en bas du menu contextuel.
Utilisation de Chrome pour inspecter le HTML d'une page
À partir de là, vous remarquerez qu'un panneau apparaît soit en bas de la page, soit sur le côté. Le placement de ce panneau n'a pas trop d'importance - c'est juste un paramètre utilisateur. Mais nous pouvons maintenant voir le HTML de la page que nous regardons avec notre élément d'en-tête mis en évidence.
Prévisualisation du HTML d'une page à l'aide des outils de développement de Chrome
Après avoir trouvé notre en-tête dans le HTML, trouvez l'attribut id. Double-cliquez sur son contenu et copiez la valeur que nous utiliserons dans un instant.
Sélection de l'attribut id à l'aide des outils de développement de Chrome
Création d'un lien vers notre en-tête
Puisque nous allons créer une table des matières, ouvrons la page d'édition de notre article et faisons défiler jusqu'en haut de la page.
La première chose que nous voulons faire est de commencer une liste, ce que nous pouvons faire en tapant un astérisque * suivi d'un espace lorsque nous commençons une nouvelle section de contenu.
Ajout d'une nouvelle liste en utilisant Markdown dans Ghost
Ensuite, écrivez ce que vous voulez que votre lien dise. Le plus souvent dans les tables des matières, le lien est exactement le même texte que l'en-tête lui-même.
Après avoir écrit ce que vous voulez, surlignez toute la ligne, et un petit menu contextuel apparaîtra au-dessus de votre sélection.
Ouverture du menu de formatage de texte enrichi
Sélectionnez la petite icône de lien et le menu contextuel se transformera en un champ de texte. Tapez dans le champ de texte un hashtag # suivi du contenu de l'attribut id que vous avez trouvé sur votre en-tête ci-dessus.
Ajout ou édition d'un lien
Appuyez sur la touche Entrée et succès ! Nous avons un lien.
Liste avec lien
Répétez les étapes ci-dessus et créez 1 lien pour chaque en-tête de premier niveau auquel vous souhaitez lier.
Ne vous sentez pas obligé d'en faire trop, cependant. Typiquement, vous verrez des articles de blog inclure uniquement les en-têtes de premier niveau de la page, donc ne vous sentez pas obligé d'inclure chaque sous-en-tête. En fin de compte - faites ce avec quoi vous êtes à l'aise.
Test et prévisualisation de votre table des matières
Une fois que nous avons terminé l'ajout de tous nos liens, nous pouvons prévisualiser ou afficher notre article et tester que nos liens fonctionnent.
Prévisualisation ou affichage de l'article dans Ghost sur freecodecamp.org/news
Après avoir ouvert votre prévisualisation ou votre page, faites défiler jusqu'à votre table des matières ou votre lien et cliquez dessus pour tester.
Utilisation d'une table des matières
Succès !
Plus d'outils pour les auteurs
Une table des matières n'est qu'une façon d'aider les lecteurs à apprécier votre travail acharné. Quels autres outils utilisez-vous qui sont importants pour votre flux de travail ? Y en a-t-il d'autres que vous avez vus mais dont vous n'êtes peut-être pas sûr de la manière de les implémenter vous-même ?
Partagez avec nous sur Twitter à @colbyfayock et @freecodecamp !
