Ajouter des icônes aux liens externes

En utilisant un module d’extension hast, vous pouvez identifier et modifier les liens dans vos fichiers Markdown qui pointent vers des sites externes. Cet exemple ajoute une icône à la fin de chaque lien externe, afin que les visiteurs sachent qu’ils quittent votre site.

Prérequis

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

Recette

Sätteri

1. Installez à la fois @astrojs/markdown-satteri et satteri :

   npm

   npm install @astrojs/markdown-satteri satteri

   pnpm

   pnpm add @astrojs/markdown-satteri satteri

   Yarn

   yarn add @astrojs/markdown-satteri satteri

2. Créez un module d’extension hast pour Sätteri qui ajoute une icône si le lien commence par http :

   src/hast/hast-external-links.ts

   import { defineHastPlugin } from 'satteri';
   
   export const hastExternalLinks = defineHastPlugin({
     name: "hast-external-links",
     element: {
       filter: ["a"],
       visit(node, context) {
         if (node.properties.href?.startsWith("http")) {
           context.appendChild(node, {
             type: "element",
             tagName: "span",
             properties: { ariaHidden: "true" },
             children: [
               {
                 type: "text",
                 value: "🔗",
               },
             ],
           });
         }
       },
     },
   });

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

   Importez satteri() et définissez-le en tant que processeur Markdown pour ajouter des modules d’extension personnalisés à Sätteri. Ensuite, transmettez à hastPlugins un tableau contenant votre module d’extension hastExternalLinks importé.

   astro.config.mjs

   import { satteri } from '@astrojs/markdown-satteri';
   import { defineConfig } from 'astro/config';
   import { hastExternalLinks } from './src/hast/hast-external-links';
   
   export default defineConfig({
     markdown: {
       processor: satteri({
         hastPlugins: [hastExternalLinks],
       }),
     },
   });

Unified

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

   npm

   npm install rehype-external-links @astrojs/markdown-remark

   pnpm

   pnpm add rehype-external-links @astrojs/markdown-remark

   Yarn

   yarn add 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 à la place, 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: ' 🔗' }
             }
           ],
         ]
       }),
     },
   });