docusaurus

Docusaurus 入门

Docusaurus将助您在极短时间内搭建优美的 `文档网站` 。 Docusaurus 是一款静态站点生成器(markdown 生成 html)。 释放了 React 的全部潜能，搭建了这款带有快速的客户端导航且交互性极佳的单页应用。 即开即用的文档功能不仅仅局限于文档本身，还可用于创建任何类型的网站（个人网站、产品网站、博客、营销着陆页等）。

快速上手

环境准备

1. nodejs 安装
2. 创建新的 Docusaurus 站点

   npx @docusaurus/init@latest init my-website classic

运行网站

cd my-websitenpx docusaurus start

访问网站

http://localhost:3000

安装mermaid

1. install mermaid yarn add mermaid
2. create file in your src/theme/Mermaid.js
3. Mermaid.js

   import React, { useEffect } from "react";import mermaid from "mermaid";
mermaid.initialize({    startOnLoad: true});
const Mermaid = ({ chart }) => {    useEffect(() => {        mermaid.contentLoaded();    }, []);    return <div className="mermaid">{chart}</div>;};
export default Mermaid;

4. demo.md

import Mermaid from '@theme/Mermaid';...<Mermaid chart={`    graph LR;        A-->B;        B-->C;        B-->D;`}/>...

经验汇总

文档编辑

1. 链接文档

The [@hello](hello.md#paginate) document is great!
See the [Tutorial](../getting-started/tutorial.md) for more info.

2. 链接图片

![](../static/img/docs/tooltag.jpg)

使用Tab

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  defaultValue="js"  values={[    { label: 'JavaScript', value: 'js', },    { label: 'Python', value: 'py', },    { label: 'Java', value: 'java', },  ]}><TabItem value="curl">
\```js    test\```
</TabItem></Tabs>

参考文档

Docusaurus api 文档

Docusaurus github