在 Astro MDX 中使用自定义组件

前言

在 Astro 中使用 MDX 撰写文章给我非常多的弹性，但绝大多数文章我还是希望使用 Markdown 现有的语法来撰写，像是：图片、代码块、列表……等，有没有办法将自定义的组件对应于 Markdown 语法呢？这样就不用每次都要再 MDX 中特地引入组件并使用，单纯的撰写 Markdown 即可，其实Astro 官方文件🔗就有提到这件事。

将 MDX 元素替换为自定义组件

在 Astro 官方文件🔗 中有提到，可以输出你想替换的 Markdown🔗为特定组件，但这么做会需要在每篇 MDX 文件中引入组件并使用，不怎麼有用。

import Blockquote from '../components/Blockquote.astro';
export const components = {
  blockquote: Blockquote,
};

替换所有 MDX 为自定义组件

如果你的文章使用 Content Collections🔗 的功能，可以在渲染页面内容时将自定义组件传递进去即可。

---
const { Content } = await post.render();
---
<Content components={{ Info, Video, img: PostImage, blockquote: PostBlockquote }} />

这个功能帮助我非常多，通过这个方式我将这个部落格的所有图片都替换成 客制化图片元件🔗 统一处理图片的尺寸、压缩、样式的问题，并且 纯粹的 Markdown 语法也更广泛通用。

延伸阅读

Astro MDX Components🔗 - kizu.dev