Añadir iconos a enlaces externos

Usando un plugin de rehype, puedes identificar y modificar enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo añade iconos al final de cada enlace externo para que los visitantes sepan que están saliendo de tu sitio.

Requisitos previos

• Un proyecto Astro que use Markdown para páginas de contenido.

Receta

1. Instala el plugin rehype-external-links.

   npm

   npm install rehype-external-links

   pnpm

   pnpm add rehype-external-links

   Yarn

   yarn add rehype-external-links

2. Importa el plugin en tu archivo astro.config.mjs.

   Pasa rehypeExternalLinks al array rehypePlugins, junto con un objeto de opciones que incluya una propiedad content. Establece la propiedad type en text si quieres añadir texto plano al final del enlace. Para añadir HTML al final del enlace, establece la propiedad type en raw.

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

   Nota

   El valor de la propiedad content no se representa en el árbol de accesibilidad. Por ello, es mejor dejar claro en el contenido que rodea al enlace que se trata de un enlace externo, en lugar de depender solo del icono.

Recursos

• rehype-external-links