Un composant Docusaurus qui prévient le lecteur que l'article a plus d'un an

Dans cet article, voyons comment afficher un petit cadre « Attention : cet article a au moins un an, ce qui, en années tech, relève quasiment de la préhistoire. »

Nous allons créer un composant React pour Docusaurus et l'injecter dans la page de nos billets de blog : une fois en place, tout fonctionnera comme par magie.

Le voici en action, sur un vieux billet de ce blog :

https://www.avonture.be/blog/joomla-show-table

C'est parti.

Créer le composant​

Vous devez créer deux nouveaux fichiers dans votre propre site Docusaurus :

Surcharger le template BlogPostPage​

Côté Docusaurus, nous devons swizzler la page responsable du rendu d'un billet. Cette page s'appelle BlogPostPage.

Pour cela, ouvrez une console et lancez yarn swizzle @docusaurus/theme-classic BlogPostItem/Content.

Dès maintenant, vous avez un nouveau fichier sur votre disque : src/theme/BlogPostItem/Content/index.js

Ci-dessous, le contenu original du fichier (Docusaurus v3.8.1) :

import React from 'react';
import clsx from 'clsx';
import {blogPostContainerID} from '@docusaurus/utils-common';?
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
import MDXContent from '@theme/MDXContent';
export default function BlogPostItemContent({children, className}) {
  const {isBlogPostPage} = useBlogPost();?
  return (
    <div
      // This ID is used for the feed generation to locate the main content
      id={isBlogPostPage ? blogPostContainerID : undefined}?
      className={clsx('markdown', className)}>?
      <MDXContent>{children}</MDXContent>
    </div>
  );
}

Pour injecter notre nouveau composant OldPostNotice, éditez le fichier comme ceci (voir les lignes surlignées) :

import React from 'react';
import clsx from 'clsx';
import {blogPostContainerID} from '@docusaurus/utils-common';
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
import MDXContent from '@theme/MDXContent';
// highlight-next-line
import OldPostNotice from "@site/src/components/Blog/OldPostNotice";?

export default function BlogPostItemContent({children, className}) {
  const {isBlogPostPage} = useBlogPost();?
  return (
    // highlight-next-line
    <>?
      // highlight-next-line
      <OldPostNotice />
      <div
        // This ID is used for the feed generation to locate the main content
        id={isBlogPostPage ? blogPostContainerID : undefined}?
        className={clsx('markdown', className)}>
        <MDXContent>{children}</MDXContent>
      </div>
    // highlight-next-line
    </>
  );
}

Sauvez le fichier et rafraîchissez votre blog. Vous devriez obtenir la même bannière que celle montrée en début d'article.

---
title: Your blog post article
authors: [you]
date: 2025-09-30
---

Marquer un billet relu​

Si vous revenez sur un vieil article et confirmez que le contenu est toujours exact, vous pouvez ajouter un champ review_date dans le front matter :

---
date: 2023-05-10
review_date: 2026-07-30
---

Quand review_date est présent et date de moins d'un an, le composant remplace l'avertissement orange par une bannière verte de confirmation :

✅ Cet article a plus d'un an mais a été relu le 30 juillet 2026 — le contenu est toujours exact.

Si review_date a lui-même plus d'un an, l'avertissement standard réapparaît — parce qu'une relecture périmée ne vaut pas mieux que pas de relecture du tout.

Position de l'avertissement​

L'avis sera placé avant le contenu du billet. Sur mon blog, j'ai manipulé le code ci-dessous pour extraire la toute première image (c'est-à-dire la bannière) afin de l'afficher en premier, puis l'avis, puis le reste de l'article. Mais c'est sans doute trop complexe pour l'instant. Nous verrons ça dans un prochain article.

L'image de bannière est traitée différemment des autres pour exactement la même raison que dans Modifier la façon dont Docusaurus génère les balises img : la première image d'un billet est spéciale et doit être laissée telle quelle.

<div
  // This ID is used for the feed generation to locate the main content
  id={isBlogPostPage ? blogPostContainerID : undefined}
  className={clsx('markdown', className)}>
  <MDXContent>{children}</MDXContent>
</div>