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

Instala el plugin rehype-external-links.
- npm
- pnpm
- Yarn
Ventana de terminal
npm install rehype-external-links
Ventana de terminal
pnpm add rehype-external-links
Ventana de terminal
yarn add rehype-external-links
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

rehype-external-links

Contribuir

Comunidad