Ajouter des icônes aux liens externes
En utilisant un module d’extension Rehype, vous pouvez identifier et modifier les liens dans vos fichiers Markdown qui pointent vers des sites externes. Cet exemple ajoute des icônes à la fin de chaque lien externe, afin que les visiteurs sachent qu’ils quittent votre site.
Prérequis
Section intitulée « Prérequis »- Un projet Astro utilisant Markdown pour les pages de contenu.
-
Installez le module d’extension
rehype-external-links
.Fenêtre du terminal npm install rehype-external-linksFenêtre du terminal pnpm add rehype-external-linksFenêtre du terminal yarn add rehype-external-links -
Importez le module d’extension dans votre fichier
astro.config.mjs
.Passez
rehypeExternalLinks
au tableaurehypePlugins
, avec un objet options qui inclut une propriété content. Définissez letype
de cette propriété surtext
si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, définissez la propriététype
surraw
.// ...import rehypeExternalLinks from 'rehype-external-links';export default defineConfig({// ...markdown: {rehypePlugins: [[rehypeExternalLinks,{content: { type: 'text', value: ' 🔗' }}],]},});La valeur de la propriété
content
est non représentée dans l’arbre d’accessibilité. Il est donc préférable d’indiquer clairement que le lien est externe dans le contenu qui l’entoure, plutôt que de se fier uniquement à l’icône.