Pular para o conteúdo

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

Seção intitulada Pré-requisitos
  • Um projeto Astro usando Markdown para o conteúdo das páginas.

Receita

Seção intitulada Receita

  1. Instale o plugin rehype-external-links.

    Terminal window
    npm install rehype-external-links

  2. 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

Seção intitulada Recursos