官网（vuepress-next）： https://v2.vuepress.vuejs.org/zh/
awesome-vuepress： https://github.com/vuepress/awesome-vuepress
视频教程：
- 【啰里啰嗦】一步步搭建 VuePress 及优化 - https://www.bilibili.com/video/BV1vb411m7NY （快速上手）
博客/主题：
- 内容不错 - https://docs.shanyuhai.top/
- 太花哨，但牛逼 - https://artiely.github.io/
样式
默认主题使用 SASS 作为 CSS 预处理器。
用户可以通过 palette 文件 来自定义样式变量，还可以通过 style 文件 来添加额外的样式。
https://ecosystem.vuejs.press/zh/themes/default/styles.html
内置功能（默认主题）
内置组件 - 提示框
https://v2.vuepress.vuejs.org/zh/reference/default-theme/markdown.html#自定义容器
::: tip
这是一个提示
:::
::: warning
这是一个警告
:::
::: danger
这是一个危险警告
:::
::: details
这是一个 details 标签
:::
::: v-pre
`{{ This will be displayed as-is }}`
:::
提示
这是一个提示
注意
这是一个警告
警告
这是一个危险警告
这是一个 details 标签
::: v-pre {{ This will be displayed as-is }} :::
内置组件 - 代码引用
其中 @code/java 为用户配置内容（配置在 .vuepress/config.ts 中）
@[code](@code/java/main/java/org/example/algorithm/SortBubble.java)
可以引用文件内容作为代码块
package org.example.algorithm;
/**
* 冒泡排序
*/
public class SortBubble<T extends Comparable<T>> implements SortFunction<T> {
@Override
public void sort(T[] arr) {
int n = arr.length;
boolean swapped;
do {
swapped = false;
for (int i = 1; i < n; i++) {
if (arr[i].compareTo(arr[i - 1]) < 0) {
swapped = true;
T t = arr[i];
arr[i] = arr[i - 1];
arr[i - 1] = t;
}
}
n--;
} while (swapped);
}
}
内置组件 - Badge
https://v2.vuepress.vuejs.org/zh/reference/default-theme/components.html#badge
- VuePress - <Badge type="tip" text="v2" vertical="top" />
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
- VuePress - v2
- VuePress - v2
- VuePress - v2
内置组件 - CodeGroup
https://v2.vuepress.vuejs.org/zh/reference/default-theme/components.html#codegroup
<CodeGroup>
<CodeGroupItem title="PNPM">
```bash:no-line-numbers
pnpm install
```
</CodeGroupItem>
<CodeGroupItem title="YARN">
```bash:no-line-numbers
yarn install
```
</CodeGroupItem>
<CodeGroupItem title="NPM" active>
```bash:no-line-numbers
npm install
```
</CodeGroupItem>
</CodeGroup>
pnpm install
yarn install
npm install
内置组件 - @[...](...)
https://v2.vuepress.vuejs.org/zh/guide/markdown.html#导入代码块
插入文件作为代码块 （拆分文件，方便编辑、统计和复用）
<!-- 最简单的语法 -->
@[code](../foo.js)
<!-- 仅导入第 1 行至第 10 行 -->
@[code{1-10}](../foo.js)
<!-- 指定代码语言 -->
@[code js](../foo.js)
<!-- 行高亮 -->
@[code js{2,4-5}](../foo.js)
@[code{3-10} js{3}:no-line-numbers](../foo.js)
自定义路径
import { getDirname, path } from '@vuepress/utils'
const __dirname = getDirname(import.meta.url)
export default {
markdown: {
importCode: {
handleImportPath: (str) =>
str.replace(/^@src/, path.resolve(__dirname, 'path/to/src')),
},
},
}
<!-- 会被解析至 'path/to/src/foo.js' -->
@[code](@src/foo.js)
使用 “数据” （data）
todo 有没这功能？要查一下。
Vuepress 2.x 配置 Mermaid
mermaid 官网 https://mermaid.nodejs.cn/
由于第三方插件 vuepress-plugin-mermaidjs 并没有适配最新版的 VuePress 2.x，因此需要手动配置 VuePress 2.x 来渲染 Mermaid 绘图。 （已经支持）
手动配置参考： https://www.techgrow.cn/posts/bc19d204.html
npm install mermaid -D
npm install @vuepress/plugin-register-components@next -D
npm install @vuepress/utils -D
编辑 .vuepress/config.ts 文件
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
import { getDirname, path } from '@vuepress/utils'
const __dirname = getDirname(import.meta.url)
export default {
plugins: [
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components'),
})
]
}
在上面的自定义组件目录下，创建 mermaid.vue 源文件，例如源文件路径为 .vuepress/components/mermaid.vue，文件的内容如下：
<template>
<div class="mermaid">
<slot></slot>
</div>
</template>
<script>
export default {
mounted() {
import("mermaid/dist/mermaid").then((m) => {
m.initialize({
startOnLoad: true,
});
m.init();
});
},
updated() {
import("mermaid/dist/mermaid").then((m) => {
m.initialize({
startOnLoad: true,
});
m.init();
});
}
};
</script>
Markdown 渲染 - 语法说明
在 MarkDown 文件内添加 <mermaid> 标签，Mermaid 的内容需要使用 {{ ... }} 包裹住，并写在 <mermaid> 标签内（如下所示）。
注意
特别注意，<mermaid> 标签内不允许存在空行。
<mermaid>
{{`
......（Mermaid 的内容）
`}}
</mermaid>