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

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

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