在 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

这是一段示例文本。

这里是折叠起来的内容！

<Collapse title="这是一段示例文本。">
  这里是折叠起来的内容！
</Collapse>

Diff

import diffLeft from "./diff-left.webp";
import diffRight from "./diff-right.webp";

<Diff l={diffLeft} r={diffRight} />

Error

可能出了点问题？

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

Warning

注意！前方有坑，小心慢行！

<Warning>注意！前方有坑，小心慢行！</Warning>

Info

这只是一条普通消息。

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

Success

恭喜，部署成功！

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

Kbd

Ctrl + C 复制文本。

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

TimeLine

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" },
  ]}
/>

LinkCard

Frosti

我的博客项目！

访问 Frosti

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

感谢阅读！

在 Frosti 中使用 MDX

2024年7月12日周五

374 字 · 3 分钟

文档示例 Frosti 博客项目