Перейти к содержимому

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

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

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

Заголовок раздела Необходимые условия
  • Проект Astro, использующий Markdown для страниц контента.

Рецепт

Заголовок раздела Рецепт

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

    Окно терминала
    npm install 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: ' 🔗' }
            }
          ],
        ]
      },
    });

Ресурсы

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