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-
Installa il plugin
rehype-external-links.Finestra del terminale npm install rehype-external-linksFinestra del terminale pnpm add rehype-external-linksFinestra del terminale yarn add rehype-external-links -
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: ' 🔗' } } ], ] },});