在 Frosti 中使用 mdx
使用 mdx 创建更多组件！
周五 7月 12 2024
---
341 字 · 2 分钟
前言
本文介绍如何在 mdx 中使用 Frosti 提供的组件来实现普通 md 无法实现的功能。
正文
开始
首先你需要创建一个 mdx 文件，很简单，把文件的后缀名改成 .mdx 即可。
引入
Frosti 提供的组件放在 /blog 和 /page 文件夹下，请您在文档属性（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="/r.png" l="/l.png"></Diff>错误
也许哪里出错了？
<Error>也许哪里出错了？</Error>警告
嘿！小心有坑！
<Warning>嘿！小心有坑！</Warning>消息
这只是一条消息。
<Info>这只是一条消息。</Info>成功
恭喜你部署成功啦！
<Success>恭喜你部署成功啦！</Success>键盘
Ctrl + C 以复制文本。
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 以复制文本。时间线
<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" },
]}
/>链接卡片
<LinkCard
title="Frosti"
desc="我的博客项目！"
url="https://github.com/EveSunMaple/Frosti"
img="/favicon.ico"
/>
评论区