跳到主要内容

开始使用Docusaurus!

· 阅读需 2 分钟
故事的程序猿👨🏻‍💻
一个后端打酱油程序猿

私有化部署,能选择的工具不多。官网也给了一些工具的对比,除了这些还有一些功能需要花钱的工具,比如 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;
```
版权声明:除特别声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明来自` 故事的程序猿!`
侵权提示:部分信息可能来源于网络,仅作为学习和参考。如发现有侵权,请随时联系删除!

评论