Aller au contenu

Ajouter des icônes aux liens externes

En utilisant un module d’extension Rehype, vous pouvez identifier et 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

Section intitulée « Prérequis »
  • Un projet Astro utilisant Markdown pour les pages de contenu.

Méthode

Section intitulée « Méthode »

  1. Installez le module d’extension rehype-external-links et @astrojs/markdown-remark.

    Fenêtre du terminal
    npm install rehype-external-links @astrojs/markdown-remark

  2. Configurez le module d’extension dans votre fichier astro.config.mjs.

    Importez unified() et définissez-le en tant que processeur Markdown pour prendre en charge les modules d’extension remark. Ensuite, transmettez à rehypePlugins un tableau contenant votre module d’extension rehypeExternalLinks importé et un objet d’options avec une propriété content. Définissez le type de cette propriété sur text si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, définissez la propriété type sur raw.

    astro.config.mjs
    import { unified } from '@astrojs/markdown-remark';
    import { defineConfig } from 'astro/config';
    import rehypeExternalLinks from 'rehype-external-links';
    

    export default defineConfig({
      // ...
      markdown: {
        processor: unified({
          rehypePlugins: [
            [
              rehypeExternalLinks,
              {
                content: { type: 'text', value: ' 🔗' }
              }
            ],
          ]
        }),
      },
    });
Contribuer Communauté Parrainer