VitePess 相关设置 #

设置vitepress输出目录 #

vitepress默认情况下，build的输出目录在 doc/.vitepress/dist 但如果是想在一个仓库中进行编辑，但在另一个仓库中进行发布的话，会导致冲突，所以想把vitepress的build输出目录调整 由于之前没有仔细看文档，以为可以通过package.json进行修改

 "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs --outDir outdir",
    "docs:serve": "vitepress serve docs"
  }

但这样不生效，然后查看vitepress的config定义才知道，如要在 doc/.vitepress/config.js 中修改，类似如下

import { defineConfig } from 'vitepress'

export default defineConfig({
  outDir: 'outdir'
})

所以编辑的时候还是要打开IDE的自定义提示，可以少走很多弯路

让vitepress支持mermaid #

默认情况下，vitepress是不支持flowchart组件mermaid的，用markdown-it-meraid，即通过在config.js中配置md扩展，只能在页面上生成类似如下的代码

<div class="mermaid">
  GRAPH
</div>

但是由于vitepress是服务端渲染，页面中对mermaid的引用就没了。导致无法正确的显示流程图

经过各种查找，发现有个实现了一个vitepress-plugin-mermaid，虽然使用起来比较麻烦，总算解决了问题。具体的可以参考https://github.com/emersonbottero/vitepress-plugin-mermaid上的说明。

需要注意的是，由于自己是使用yarn add 添加依赖，而说明中指定的npm i,所以需要再添加对 mermaid mutation-observer 这两个组件的依赖。

需要注意的是，这个插件目前更新过很多轮，无论是使用形式，还是依赖库都有了很大的变化。需要根据自己使用的版本来适配，需要发现解决不了的问题，可以去看一看这个仓库的issue列表，一般都有人遇到类似的问题及解决方案

升级到Vitepress 1.0 #

Vitepress由于还在非常早期的阶段，版本号突然从之前的0.22升级到了1.0，并带来了一些breakchange,并导致无法编译。检查了之后发现：

1. 切换了markdown的实现，之前的yml被认为不识别的语言。检查后发现了改成了yaml
2. sidebar的children改成了items

修改了这两个点之后，可以正常变异并正确展示了。