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.

  • Un progetto Astro che usa Markdown per le pagine.
  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: ' 🔗' }
}
],
]
},
});
Contribute

A cosa stai pensando?

Crea una Issue su GitHub

Il modo più rapido per segnalare un problema al nostro team.

Community