외부 링크에 아이콘 추가
rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown 파일의 링크를 식별하고 수정할 수 있습니다. 이 예시에서는 방문자가 사이트를 떠난다는 것을 알 수 있도록 각 외부 링크 끝에 아이콘을 추가합니다.
전제 조건
섹션 제목: 전제 조건- 콘텐츠 페이지에 Markdown을 사용하는 Astro 프로젝트가 필요합니다.
레시피
섹션 제목: 레시피-
rehype-external-links플러그인을 설치합니다.Terminal window npm install rehype-external-linksTerminal window pnpm add rehype-external-linksTerminal window yarn add rehype-external-links -
플러그인을
astro.config.mjs파일로 가져옵니다.content 속성이 포함된 옵션 객체와 함께
rehypeExternalLinks를rehypePlugins배열에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의type을text로 설정하세요. 대신 링크 끝에 HTML을 추가하려면type속성을raw로 설정하세요.// ...import rehypeExternalLinks from 'rehype-external-links';export default defineConfig({// ...markdown: {rehypePlugins: [[rehypeExternalLinks,{content: { type: 'text', value: ' 🔗' }}],]},});