외부 링크에 아이콘 추가

rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown 파일의 링크를 식별하고 수정할 수 있습니다. 이 예시에서는 방문자가 사이트를 떠난다는 것을 알 수 있도록 각 외부 링크 끝에 아이콘을 추가합니다.

전제 조건

• 콘텐츠 페이지에 Markdown을 사용하는 Astro 프로젝트가 필요합니다.

레시피

1. rehype-external-links 플러그인과 @astrojs/markdown-remark를 모두 설치합니다.

   npm

   npm install rehype-external-links @astrojs/markdown-remark

   pnpm

   pnpm add rehype-external-links @astrojs/markdown-remark

   Yarn

   yarn add rehype-external-links @astrojs/markdown-remark

2. astro.config.mjs 파일에서 플러그인을 설정합니다.

   remark 플러그인을 지원하도록 unified()를 가져와 Markdown 프로세서로 정의합니다. 그런 다음, 가져온 rehypeExternalLinks 플러그인과 content 속성이 포함된 옵션 객체를 담은 배열을 rehypePlugins에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의 type을 text로 설정하세요. 대신 링크 끝에 HTML을 추가하려면 type을 raw로 설정하세요.

   astro.config.mjs

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

   참고

   content 속성의 값은 접근성 트리에 표시되지 않습니다. 따라서 아이콘에만 의존하기보다는 링크가 주변 콘텐츠 외부에 있다는 점을 분명히 하는 것이 가장 좋습니다.