Ajouter des icônes aux liens externes

Le plugin rehype vous permet d’identifier et de modifier les liens dans vos fichiers Markdown qui pointent vers des sites externes. Cet exemple ajoute des icônes à la fin de chaque lien externe, afin que les visiteurs sachent qu’ils quittent votre site.

Prérequis

Titre de la section Prérequis

• Un projet Astro utilisant Markdown pour les pages de contenu.

Méthode

Titre de la section Méthode

1. Installer le plugin rehype-external-links.

   npm

   npm install rehype-external-links

   pnpm

   pnpm add rehype-external-links

   Yarn

   yarn add rehype-external-links

2. Importez le plugin dans votre fichier astro.config.mjs.

   Passez rehypeExternalLinks au tableau rehypePlugins, avec un objet options qui inclut une propriété content. Définissez le type de cette propriété à text si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, mettez la propriété type à raw.

   // ...
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' 🔗' }
           }
         ],
       ]
     },
   });

   Note

   La valeur de la propriété content est non représentée dans l’arbre d’accessibilité. Il est donc préférable d’indiquer clairement que le lien est externe dans le contenu qui l’entoure, plutôt que de se fier uniquement à l’icône.

Resources

Titre de la section Resources

• rehype-external-links