Table of Contents
前言 Link to 前言
本文介绍了如何在 mdx 中使用 Frosti 提供的组件，以实现普通 md 文件无法实现的功能。
正文 Link to 正文
快速开始 Link to 快速开始
首先，你需要创建一个 mdx 文件，只需将文件扩展名改为 .mdx 即可。
引入组件 Link to 引入组件
Frosti 提供的组件放置在 /mdx 文件夹中。在文档属性（frontmatter）下方引入这些组件：
MDX
123456789import Collapse from "../../components/mdx/Collapse.astro";
import Diff from "../../components/mdx/Diff.astro";
import Error from "../../components/mdx/Error.astro";
import Info from "../../components/mdx/Info.astro";
import Kbd from "../../components/mdx/Kbd.astro";
import Success from "../../components/mdx/Success.astro";
import Warning from "../../components/mdx/Warning.astro";
import TimeLine from "../../components/mdx/TimeLine.astro";
import LinkCard from "../../components/mdx/LinkCard.astro";
示例 Link to 示例
折叠内容 Link to 折叠内容
这是一个示例文本。
这是隐藏的内容！
MDX
123<Collapse title="这是一个示例文本。">
这是隐藏的内容！
</Collapse>
图片对比 Link to 图片对比
MDX
1<Diff r="/image/r.png" l="/image/l.png" />
错误提示 Link to 错误提示
可能出了一些问题？
MDX
1<Error>可能出了一些问题？</Error>
警告提示 Link to 警告提示
嘿！小心路上的坑洞！
MDX
1<Warning>嘿！小心路上的坑洞！</Warning>
信息提示 Link to 信息提示
这只是一条普通消息。
MDX
1<Info>这只是一条普通消息。</Info>
成功提示 Link to 成功提示
恭喜你成功部署！
MDX
1<Success>恭喜你成功部署！</Success>
键盘按键 Link to 键盘按键
按下 Ctrl + C 复制文本。
MDX
1按下 <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 复制文本。
时间轴 Link to 时间轴
MDX
123456789<TimeLine
items={[
{ year: "1984", event: "第一台 Macintosh 电脑" },
{ year: "1998", event: "iMac" },
{ year: "2001", event: "iPod" },
{ year: "2007", event: "iPhone" },
{ year: "2015", event: "Apple Watch" },
]}
/>
链接卡片 Link to 链接卡片
MDX
123456<LinkCard
title="Frosti"
desc="我的博客项目！"
url="https://github.com/EveSunMaple/Frosti"
img="/view.png"
/>
通过以上示例，你可以在 mdx 文件中灵活使用 Frosti 提供的组件，增强内容的交互性和视觉效果。如果需要更多帮助，请随时告诉我！ 😊
Thanks for reading!