一个新的开始

2023，又是新的一年啦！

过年在家闲着没事翻了翻GitHub，发现一个叫 docusaurus 的文档生成器， facebook 开源的前端项目，又使用 React + Markdown，就建了个玩玩。

翻文档的时候发现 docusaurus 还可以生成静态博客！联想到原来的博客已经半年没更新了😂，于是准备上手试试，可以的话就把文章迁移到 docusaurus 。一试不要紧， docusaurus 使用的 Markdown 拓展语法 MDX 把我吓了一跳 原谅我的孤陋寡闻…… MDX 支持在 Markdown 里写 React！

下面就来展示一下 MDX 语法能干些啥吧~~

Hello Docusaurus !

简单的 JSX

既然支持 React 代码，那咱先写个简单的按钮试试：

button.mdx

<button onClick={() => alert("(*Φ皿Φ*)")}>Click Me</button>

使用 UI 框架

emm， 这弹窗太丑了，我们让他变漂亮一点， 装个 @mui/material 。

这里我们使用了 React 的 useState Hook

Dialog.tsx

import {
    Button, Dialog, DialogActions,
    DialogContent, DialogContentText, DialogTitle
} from "@mui/material";
import React, {useState} from "react";

export default function DialogSample() {
    const [open, setOpen] = useState(false);
    const handleClose = () => setOpen(false);

    return (
        <>
            <Button
                variant="contained"
                onClick={() => setOpen(true)}
            >Click Me</Button>
            <Dialog
                open={open}
                onClose={handleClose}
            >
                <DialogTitle>
                    可爱的弹窗😁
                </DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} autoFocus>
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

button.mdx

import DialogSample from "./Dialog";

<DialogSample/>

http://localhost:3000

是不是好看多了？

Markdown 实时渲染

$$ \sec x=\frac1{\cos x} $$ ```tsx function Counter() { const [count, setCount] = useState(0); return ( <> <p>当前计数：{count}</p> <button onClick={() => setCount(count + 1)}>+1</button> </> ) } ```

​

组件内路由

甚至于，咱模拟一个浏览器也不是不行 套娃了属于是

http://localhost:3000/

当前路径：/

• /
• /page1
• /page2

/

/page1

/page2