Adicione ícones em 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 usando Markdown para o conteúdo das páginas.

Receita

Instale o plugin rehype-external-links.
- npm
- pnpm
- Yarn
Terminal window
npm install rehype-external-links
Terminal window
pnpm add rehype-external-links
Terminal window
yarn add rehype-external-links
Importe o plugin no seu arquivo astro.config.mjs.

Passe rehypeExternalLinks para o array rehypePlugins, junto com um objeto de opções que inclui uma propriedade content. Defina o type desta propriedade para text se você quiser adicionar texto simples ao final do link. Já para adicionar HTML ao final do link, defina a propriedade type para raw.
```
// ...
import rehypeExternalLinks from 'rehype-external-links';

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

Recursos

rehype-external-links

Contribua

Comunidade