SaroProck ⚡
在 Frosti 中使用 mdx

在 Frosti 中使用 mdx

Fri Jul 12 2024
3 分钟
技术 Frosti 博客 项目
430 字

前言#

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

正文#

开始#

首先你需要创建一个 mdx 文件，很简单，把文件的后缀名改成 .mdx 即可。

引入#

Frosti 提供的组件放在 /blog 和 /page 文件夹下，请您在文档属性（frontmatter）下写入一下内容：

ASTRO
1
2
3
4
5
6
7
8
9
import Collapse from "../../components/blog/collapse.astro"
import Diff from "../../components/blog/diff.astro"
import Error from "../../components/blog/error.astro";
import Info from "../../components/blog/info.astro";
import Kbd from "../../components/blog/kbd.astro"
import Success from "../../components/blog/success.astro";
import Warning from "../../components/blog/warning.astro";
import TimeLine from "../../components/page/TimeLine.astro";
import LinkCard from "../../components/page/LinkCard.astro";

示例#

折叠页面#

这是一段示例文本。
这是藏起来的内容！
ASTRO
1
<Collapse title="这是一段示例文本。">这是藏起来的内容！</Collapse>

对比#

daisy
daisy
ASTRO
1
<Diff r="/r.png" l="/l.png"></Diff>

错误#

ASTRO
1
<Error>也许哪里出错了？</Error>

警告#

ASTRO
1
<Warning>嘿！小心有坑！</Warning>

消息#

ASTRO
1
<Info>这只是一条消息。</Info>

成功#

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

键盘#

Ctrl + C 以复制文本。

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

时间线#

  • First Macintosh computer
  • iMac
  • iPod
  • iPhone
  • Apple Watch
ASTRO
1
2
3
4
5
6
7
8
9
<TimeLine
  items={[
    { year: "1984", event: "First Macintosh computer" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

链接卡片#

Frosti

Frosti

我的博客项目！

ASTRO
1
2
3
4
5
6
<LinkCard
  title="Frosti"
  desc="我的博客项目！"
  url="https://github.com/EveSunMaple/Frosti"
  img="/favicon.ico"
/>