一个新的开始
· 阅读需 4 分钟
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;
组件内路由
甚至于,咱模拟一个浏览器也不是不行 套娃了属于是