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 de Astro que usa Markdown para páginas de contenido.

Receta

1. Instala tanto el plugin rehype-external-links como @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. Configura el plugin en tu archivo astro.config.mjs.

   Importa unified() y defínelo como el procesador de Markdown para soportar remark plugins. Luego, pasa a rehypePlugins un array que contenga tu plugin rehypeExternalLinks importado y un objeto de opciones con una propiedad content. Establece la propiedad type de esta propiedad a text si quieres añadir texto plano al final del enlace. Para añadir HTML al final del enlace en su lugar, establece la propiedad type a 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: ' 🔗' }
             }
           ],
         ]
       }),
     },
   });

   Nota

   El valor de la propiedad content no está representado en el árbol de accesibilidad. Como tal, es mejor dejar claro que el enlace es externo en el contenido circundante, en lugar de depender solo del icono.