FLFfang

前言

本文介绍了如何在 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 r="/image/r.png" l="/image/l.png" />

错误

可能出错了？

<Error>可能出错了？ </Error>

警告

嘿！小心路上的坑！

<Warning>嘿！小心路上的坑！ </Warning>

消息

这只是一个消息。

<Info>这只是一个消息。 </Info>

成功

恭喜你成功部署！

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

键盘快捷键

Ctrl + C 复制文本。

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

时间线

1984
第一台 Macintosh 电脑
iMac
1998
2001
iPod
iPhone
2007
2015
Apple Watch

<TimeLine
  items={[
    { year: "1984", event: "第一台 Macintosh 电脑" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

链接卡片

Frosti

我的博客项目！

Visit Frosti

<LinkCard
  title="Frosti"
  desc="我的博客项目！"
  url="https://github.com/EveSunMaple/Frosti"
  img="/view.png"
/>

Thanks for reading!

在 Frosti 中使用 mdx

Fri Jul 12 2024

345 字 · 3 分钟

tech Frosti mdx