Fri Jul 12 2024

465 字 · 4 分钟

在 Frosti 中使用 MDX

前言 Link to 前言

This article describes how to use the components provided by Frosti in mdx to realize the functions that can’t be realized by normal md.

主要内容 Link to 主要内容

Getting started Link to Getting started

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

介绍 Link to 介绍

The components provided by Frosti are placed in the /mdx folders. Write something under the document properties (frontmatter):

ASTRO

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";

样例 Link to 样例

Collapse Link to Collapse

This is an example text.

This is the hidden content!

ASTRO

1
2

<Collapse title="This is an example text.">
  This is the hidden content!
</Collapse>

Diff Link to Diff

ASTRO

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

Error Link to Error

Maybe something went wrong?

ASTRO

<Error>Maybe something went wrong? </Error>

Warning Link to Warning

Hey! Watch out for potholes!

ASTRO

<Warning>Hey! Watch out for potholes! </Warning>

Message Link to Message

It’s just a message.

ASTRO

<Info>It's just a message. </Info>

Success Link to Success

Congratulations on your successful deployment!

ASTRO

<Success>Congratulations on your successful deployment! </Success>

Kbd Link to Kbd

Ctrl + C to copy the text.

ASTRO

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine Link to TimeLine

1984

First Macintosh computer
iMac

1998
2001

iPod
iPhone

2007
2015

Apple Watch

ASTRO

<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

Hackastro

My blog project!

Learn more

ASTRO

<LinkCard
  title="Hackastro"
  desc="My blog project!"
  url="https://github.com/JackTheMico/hackastro"
  img="/image/view.png"
/>