Table of Contents
序言 Link to 序言
本文介绍了如何在 Frosti 中使用已有组件, 实现普通Markdown无法实现的功能
Getting started Link to Getting started
首先您需要创建一个mdx文件, 也就是创建一个后缀为.mdx的文件
Introducing Link to Introducing
Frosti 提供的组件放置在/mdx文件夹中 使用时, 需要在文档属性中导入一些什么:
MDX
123456789import 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";
实例 Link to 实例
Collapse Link to Collapse
这只是一个示例文本
这是被隐藏的内容
MDX
123<Collapse title="这只是一个示例文本">
这是被隐藏的内容
</Collapse>
Diff Link to Diff
MDX
1<Diff r="/image/r.png" l="/image/l.png" />
Error Link to Error
可能存在一些错误?
MDX
1<Error> 可能存在一些错误? </Error>
Warning Link to Warning
小心!
MDX
1<Warning> 小心! </Warning>
Message Link to Message
这只是一个消息
MDX
1<Info> 这只是一个消息 </Info>
Success Link to Success
恭喜您成功部署!
MDX
1<Success> 恭喜您成功部署! </Success>
Kbd Link to Kbd
Ctrl + C 可以复制文本
MDX
1<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 可以复制文本
TimeLine Link to TimeLine
MDX
123456789<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 Link to LinkCard
MDX
123456<LinkCard
title="Frosti"
desc="A blog project!"
url="https://github.com/EveSunMaple/Frosti"
img="/view.png"
/>
Thanks for reading!