在 RyuChan 中使用 MDX
使用 MDX 在 RyuChan 中丰富文章内容，添加更多组件
周五 7月 12 2024 MDX
356 字 · 3 分钟
前言
本文介绍如何在 RyuChan 中使用 mdx 提供的组件，实现普通 md 无法实现的功能。
正文
开始使用
首先你需要创建一个 mdx 文件，只需将文件扩展名改为 .mdx 即可。
引入组件
RyuChan 提供的组件放在 /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> 复制文本。时间线
<TimeLine
items={[
{ year: "1984", event: "第一台 Macintosh 电脑" },
{ year: "1998", event: "iMac" },
{ year: "2001", event: "iPod" },
{ year: "2007", event: "iPhone" },
{ year: "2015", event: "Apple Watch" },
]}
/>链接卡片
<LinkCard
title="RyuChan"
desc="我的博客项目！"
url="https://github.com/kobaridev/RyuChan"
img="https://img.xiaozhangya.xin/file/Avatar/NOr1G3Zs.jpeg"
/> Thanks for reading!
在 RyuChan 中使用 MDX
周五 7月 12 2024 MDX
356 字 · 3 分钟
-
-
Comments