Добавление иконок к внешним ссылкам

Используя плагин rehype, вы можете определять и изменять ссылки в ваших файлах Markdown, которые указывают на внешние сайты. Этот пример добавляет иконки в конец каждой внешней ссылки, чтобы посетители знали, что они покидают ваш сайт.

Необходимые условия

• Проект Astro, использующий Markdown для страниц контента.

Рецепт

1. Установите плагин rehype-external-links.

   npm

     npm install rehype-external-links

   pnpm

     pnpm add rehype-external-links

   Yarn

     yarn add rehype-external-links

2. Импортируйте плагин в файл astro.config.mjs.

   Передайте rehypeExternalLinks в массив rehypePlugins вместе с объектом параметров, включающим свойство content. Установите для этого свойства type значение text, если хотите добавить в конец ссылки обычный текст. Чтобы добавить HTML в конец ссылки, установите свойство type в raw.

   // ...
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' 🔗' }
           }
         ],
       ]
     },
   });

:::noteЗначение свойства content - не представлено в дереве доступности. Поэтому лучше всего указать, что ссылка является внешней, в окружающем контенте, а не полагаться только на значок.:::

Ресурсы

• rehype-external-links