开始使用 Docusaurus!

私有化部署，能选择的工具不多。官网也给了一些工具的对比，除了这些还有一些功能需要花钱的工具，比如 FlowUs，语雀等等。

但要是想没有那么多条条框框的限制就得私有部署，选择这种静态网站生成工具，直接部署在 github 或者白嫖一些其他静态网站托管，成本就几乎为零了。说白了就是折腾。

安装

npx create-docusaurus@latest my-website classic

启动服务

cd my-website
npm run start

基本配置

主体颜色

网址有设置的工具：https://docusaurus.io/docs/styling-layout ↗ 只需要挑选自己的颜色就能生成对应的颜色配置。

自定义侧边栏

调整 sidebar.js 按照目录自动分类：

springSidebar: [{ type: 'autogenerated', dirName: 'spring' }];

搜索

本地搜索

插件地址：https://github.com/easyops-cn/docusaurus-search-local ↗

安装

搜索框

npm run swizzle @docusaurus/theme-classic SearchBar

搜索工具

npm install --save @easyops-cn/docusaurus-search-local
# or
yarn add @easyops-cn/docusaurus-search-local

配置文件docusaurus.config.js增加：

themes: [
    [
        require.resolve("@easyops-cn/docusaurus-search-local"),
        /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
        ({
            hashed: true,
            language: ["en", "zh"],
        }),
    ],
],

执行构建后方可使用本地检索。

使用 Mermaid

安装插件

npm install --save @docusaurus/theme-mermaid

配置文件docusaurus.config.js增加：

module.exports = {
    plugins: ['@docusaurus/theme-mermaid'],
    markdown: {
        mermaid: true
    }
};

配置主题颜色。可选主题颜色：https://mermaid.js.org/config/theming.html ↗

module.exports = {
    themeConfig: {
        mermaid: {
            theme: { light: 'neutral', dark: 'forest' }
        }
    }
};

使用

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;