외부 링크에 아이콘 추가

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

전제 조건

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

레시피

Sätteri

1. @astrojs/markdown-satteri와 satteri를 모두 설치합니다.

   npm

   npm install @astrojs/markdown-satteri satteri

   pnpm

   pnpm add @astrojs/markdown-satteri satteri

   Yarn

   yarn add @astrojs/markdown-satteri satteri

2. 링크가 http로 시작할 때 아이콘을 추가하는 Sätteri hast 플러그인을 만듭니다.

   src/hast/hast-external-links.ts

   import { defineHastPlugin } from 'satteri';
   
   export const hastExternalLinks = defineHastPlugin({
     name: "hast-external-links",
     element: {
       filter: ["a"],
       visit(node, context) {
         if (node.properties.href?.startsWith("http")) {
           context.appendChild(node, {
             type: "element",
             tagName: "span",
             properties: { ariaHidden: "true" },
             children: [
               {
                 type: "text",
                 value: "🔗",
               },
             ],
           });
         }
       },
     },
   });

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

   satteri()를 가져와 Markdown 프로세서로 정의하여 사용자 지정 Sätteri 플러그인을 추가합니다. 그런 다음 가져온 hastExternalLinks 플러그인이 포함된 배열을 hastPlugins에 전달합니다.

   astro.config.mjs

   import { satteri } from '@astrojs/markdown-satteri';
   import { defineConfig } from 'astro/config';
   import { hastExternalLinks } from './src/hast/hast-external-links';
   
   export default defineConfig({
     markdown: {
       processor: satteri({
         hastPlugins: [hastExternalLinks],
       }),
     },
   });

Unified

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: ' 🔗' }
             }
           ],
         ]
       }),
     },
   });