Qu'est-ce que Frontmatter ?

Introduction

Lorsque j’écris mes articles de blog au format Markdown, je me réfère souvent à Frontmatter.

Qu’est-ce que Frontmatter ?

Frontmatter est un moyen d’identifier des métadonnées dans les fichiers Markdown. Les métadonnées sont définies par vos soins et sont généralement utilisées pour décrire les éléments d’une page que vous ne voyez pas directement.

Voici quelques exemples de métadonnées courantes :

• Titre d’un article
• Description à des fins de référencement
• Balises appartenant à un document
• La date à laquelle l’article a été publié ou modifié

Ce ne sont que quelques exemples, vous pouvez chosir ce dont vous avez besoin avec Frontmatter.

Comment utiliser Frontmatter ?

Pour ajouter Frontmatter à un document Markdown, vous devez commencer par écrire un bloc avec trois tirets en haut de votre fichier.

---
title: "Le titre de notre article"
---

# Contenu du Markdown

Dans l’exemple ci-dessous, vous pouvez constater la zone délimitée par les trois tirets. Tout ce qui est contenu à l’intérieur de cette zone sera considéré comme des métadonnées. Sous les trois tirets suivants se trouve le début de notre fichier Markdown.

Quelques exemples

Il est important de noter que Frontmatter utilise le langage YAML, donc l’indentation est importante.

Par exemple, pour définir une variable, il suffit d’utiliser la syntaxe <nom_variable> : <valeur> :

---
title: 'Le titre de notre document'
---

Nous pouvons aussi définir une liste d’éléments :

---
tags:
	- Angular
	- React
    - Vue
---

Il est ausi possible d’utiliser la notation sous forme de crochets pour définir des tableaux :

---
tags: ["JavaScript", "Typescript"]
---

Dans les cas extrêmes, vous pourriez même vouloir avoir des tableaux d’objets multidimensionnels :

---
tech:
	- frontend
		stack: Next jS
	- backend
		stack: Django
---

Outre les tableaux, vous pouvez utiliser des blocs de texte multilignes.

Cela n’ajoutera pas de nouvelles lignes dans le code généré :

---
description: >
	ceci est
	une chaine
	multilignes
---

Ce qui affichera :

ceci est une chaîne multilignes.

Cependant, si vous souhaitez ajouter de nouvelles lignes, vous pouvez utiliser la méthode pipe :

---
description: |
	ceci est
	une chaine
	multilignes
---

Ce qui affichera :

ceci est
une chaine
multilignes

Conclusion

Frontmatter est un moyen super intuitif de faire en sorte que vos fichiers Markdown contiennent des métadonnées.

Il peut améliorer votre référencement SEO, les données de votre site Web et même être utilisé avec les fichiers MDX.