在 Frosti 中使用 MDX

序言

本文介绍了如何在 Frosti 中使用已有组件, 实现普通Markdown无法实现的功能

Getting started

首先您需要创建一个mdx文件, 也就是创建一个后缀为.mdx的文件

Introducing

Frosti 提供的组件放置在/mdx文件夹中使用时, 需要在文档属性中导入一些什么:

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

这只是一个示例文本

这是被隐藏的内容

<Collapse title="这只是一个示例文本">
  这是被隐藏的内容
</Collapse>

Diff

<Diff r="/image/r.png" l="/image/l.png" />

Error

可能存在一些错误?

<Error> 可能存在一些错误? </Error>

Warning

小心!

<Warning> 小心! </Warning>

Message

这只是一个消息

<Info> 这只是一个消息 </Info>

Success

恭喜您成功部署!

<Success> 恭喜您成功部署! </Success>

Kbd

Ctrl + C 可以复制文本

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> 可以复制文本

TimeLine

1984
First Macintosh computer
iMac
1998
2001
iPod
iPhone
2007
2015
Apple Watch

<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

humid1ch - Github

A Github

Visit humid1ch - Github

<LinkCard
  title="humid1ch - Github"
  desc="A Github"
  url="https://github.com/humid1ch"
  img="https://github.com/humid1ch.png"
/>

Thanks for reading!

在 Frosti 中使用 MDX

周五 7月 12 2024

319 字 · 2 分钟

tech Frosti Blog Project