使用客製化元件在 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