Astro开发自定义功能插件mdast-util-directive
💡
原文中文，约6200字，阅读约需15分钟。
📝
内容提要
本文介绍了如何在博客中使用Astro框架和mdast-util-directive包添加GitHub卡片功能。通过定义节点指令，可以在Markdown文档中插入GitHub卡片，展示项目的描述、星标和分支数，并提供了相关代码示例和配置方法。
🎯
关键要点
- 本文介绍了如何在博客中使用Astro框架和mdast-util-directive包添加GitHub卡片功能。
- 通过定义节点指令，可以在Markdown文档中插入GitHub卡片，展示项目的描述、星标和分支数。
- Astro框架默认集成了mdast-util-directive包，无需单独安装。
- 使用::github{repo="cirry/astro-yi"}的方式在md文档中添加GitHub卡片。
- 提供了remarkGithubCard函数的实现代码，用于处理Markdown中的GitHub卡片指令。
- 在astro.config.mjs中添加remarkGithubCard到remarkPlugins中以启用功能。
- 可以使用类似的方式实现其他功能，如插入视频等。
❓
延伸问答
如何在Astro框架中添加GitHub卡片功能？
可以通过在Markdown文档中使用::github{repo="你的仓库名"}的方式来添加GitHub卡片。
mdast-util-directive包的作用是什么？
mdast-util-directive包用于识别Markdown文档中的指令标记，支持文本指令、节点指令和容器指令。
如何在astro.config.mjs中启用remarkGithubCard功能？
需要将remarkGithubCard添加到astro.config.mjs中的remarkPlugins数组中。
使用remarkGithubCard函数时需要注意什么？
确保传入的repo属性格式为'owner/repo'，否则会返回无效的仓库提示。
Astro框架是否需要单独安装mdast-util-directive包？
不需要，Astro框架默认集成了mdast-util-directive包。
除了GitHub卡片，如何在Markdown中插入其他功能？
可以使用类似的方式，例如::video[bilibili]{id="视频ID"}来插入视频。
➡️
