Salta ai contenuti

Aggiungi delle icone ai link esterni

Usando un plugin rehype, puoi identificare e modificare i link nei tuoi file Markdown che puntano a siti esterni. Questo esempio aggiunge icone alla fine di ogni link esterno, in modo che i visitatori sappiano che stanno lasciando il tuo sito.

Prerequisiti

Sezione intitolata Prerequisiti
  • Un progetto Astro che usa Markdown per le pagine.

Ricetta

Sezione intitolata Ricetta

  1. Installa il plugin rehype-external-links.

    Terminal window
    npm install rehype-external-links

  2. Importa il plugin nel tuo file astro.config.mjs.

Passa rehypeExternalLinks all’array rehypePlugins, insieme a un oggetto di opzioni che include una proprietà content. Imposta la proprietà type su text se vuoi aggiungere del testo semplice alla fine del link. Per aggiungere invece HTML alla fine del link, imposta la proprietà type su raw.

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


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

Risorse

Sezione intitolata Risorse