在 Frosti 中使用 mdx

前言

本文介绍如何在 mdx 中使用 Frosti 提供的组件，实现普通 md 无法实现的功能。

正文

快速开始

首先需要创建一个 mdx 文件，只需将扩展名改为 .mdx 即可。

引入组件

Frosti 提供的组件都放在 /mdx 文件夹中。在文档属性 (frontmatter) 下方写入：

import 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";

组件示例

折叠面板

这是一个示例文本

这是被隐藏的内容！

<Collapse title="这是一个示例文本">
  这是被隐藏的内容！
</Collapse>

差异对比

<Diff l="/image/l.png" r="/image/r.png" />

错误提示

可能出了些问题？

<Error>可能出了些问题？</Error>

警告提示

嘿！注意路面坑洞！

<Warning>嘿！注意路面坑洞！</Warning>

信息提示

这只是一条普通消息。

<Info>这只是一条普通消息。</Info>

成功提示

恭喜您部署成功！

<Success>恭喜您部署成功！</Success>

键盘按键

Ctrl + C 复制文本。

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 复制文本。

时间轴

2010
小米公司成立
小米手机 1 发布
2011
2018
小米在香港上市
小米宣布造车
2021
2024
小米 SU7 发布

<TimeLine
  items={[
    { year: "2010", event: "小米公司成立" },
    { year: "2011", event: "小米手机 1 发布" },
    { year: "2018", event: "小米在香港上市" },
    { year: "2021", event: "小米宣布造车" },
    { year: "2024", event: "小米 SU7 发布" },
  ]}
/>

链接卡片

MyBlog

我的博客网站！

访问 MyBlog

<LinkCard
  title="MyBlog"
  desc="我的博客网站！"
  url="https://blog.jursin.top"
  img=""
/>

Thanks for reading!

在 Frosti 中使用 mdx

2024年07月12日

385 字 · 3 分钟

文档示例 mdx