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

Используя плагин 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: ' 🔗' }
           }
         ],
       ]
     },
   });

Заметка

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

Ресурсы

Заголовок раздела Ресурсы

• rehype-external-links