Saltearse al contenido
Astro Astro

Agregar iconos a los enlaces externos

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

Prerrequesitos

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

Receta

  1. Instala el plugin rehype-external-links.

    Terminal window
    npm install 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. Si deseas agregar texto sin formato al final del enlace, establece el type de esta propiedad como text. Para agregar HTML en lugar de texto al final del enlace, establece el type de la propiedad como raw.

    ...
    import rehypeExternalLinks from 'rehype-external-links';
    

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });

Recursos