跳到主要内容

一个新的开始

· 阅读需 4 分钟
Skyone

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 实时渲染

高级图表

你以为只能完成这么简单的组件吗?接下来搞点图表试试,装个 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/

当前路径:/

/