一个新的开始

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> </> ) } ```

​

高级图表

你以为只能完成这么简单的组件吗？接下来搞点图表试试，装个 echarts 包，搞起。

SizedChart.tsx

import {useColorMode} from "@docusaurus/theme-common";
import {Box} from "@mui/material";
import * as echarts from "echarts";
import {EChartsOption} from "echarts";
import React, {useEffect, useRef} from "react";

type ResizedChartParams = {
    option: EChartsOption
}

function ResizedChart({option}: ResizedChartParams) {
    const ref = useRef<HTMLDivElement>();
    const {colorMode} = useColorMode();

    useEffect(() => {
        const width = Math.min(804, ref.current.clientWidth) - 24,
            height = Math.max(320, width * 0.6);
        const chart = echarts.init(ref.current, colorMode, {width, height});
        chart.setOption(option);

        function resize() {
            const width = Math.min(804, ref.current.clientWidth) - 24,
                height = Math.max(320, width * 0.6);
            chart.resize({width, height});
        }

        window.addEventListener("resize", resize);
        return () => {
            chart.dispose();
            window.removeEventListener("resize", resize);
        };
    }, [ref.current, colorMode]);

    return <Box sx={{p: 1.5, mb: 2.5, backgroundColor: colorMode === "dark" && "#100c2a"}} ref={ref}></Box>;
}

export default ResizedChart;

组件内路由

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

http://localhost:3000/

当前路径：/

• /
• /page1
• /page2

/

/page1

/page2