前言
本文介绍了如何在 Kael 博客中使用在 mdx 中提供的组件，来实现普通 md 无法实现的功能。
开始使用
首先，你需要创建一个 mdx 文件，就是将扩展名更改为 .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";1.折叠框
这是一个示例文本。
这就是隐藏的内容！
<Collapse title="这是一个示例文本。">
这就是隐藏的内容！
</Collapse>2.图片对比
<Diff l="/image/background1.webp" r="/image/ef5ff4d94a91.jpeg" />3.错误标签
Maybe something went wrong?
<Error>Maybe something went wrong? </Error>4.警告标签
Hey! Watch out for potholes!
<Warning>Hey! Watch out for potholes! </Warning>5.消息标签
It’s just a message.
<Info>It's just a message. </Info>6.成功标签
Congratulations on your successful deployment!
<Success>Congratulations on your successful deployment! </Success>7.键盘样式
Ctrl + C to copy the text.
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.8.时间轴
<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" },
]}
/>9.网站卡片
<LinkCard
title="Kael"
desc="My blog project!"
url="https://github.com/zayck/Kael"
img="/goat.jpg"
/> Thanks for reading!
已复制链接
Comments