Adicionar ícones a links externos

Usando um plugin rehype, você pode identificar e modificar links nos seus arquivos Markdown que apontam para sites externos. Este exemplo adiciona ícones ao final de cada link externo, para que os visitantes saibam que estão saindo do seu site.

Pré-requisitos

• Um projeto Astro que usa Markdown para páginas de conteúdo.

Receita

1. Instale o plugin rehype-external-links e o @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. Configure o plugin no seu arquivo astro.config.mjs.

   Importe unified() e defina-o como o processador de Markdown para dar suporte a plugins remark (EN). Em seguida, passe ao rehypePlugins um array contendo o plugin rehypeExternalLinks que você importou e um objeto de opções com uma propriedade content. Defina o type dessa propriedade como text se quiser adicionar texto puro ao final do link. Para adicionar HTML ao final do link, defina a propriedade type como 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

   O valor da propriedade content não é representado na árvore de acessibilidade. Por isso, é melhor deixar claro no conteúdo ao redor que o link é externo, em vez de depender apenas do ícone.