升级到 Vuepress2.0.0-beta.61
从 vuepress2.0.0-beta.40 开始，vuepress 使用了新的 api 接口，意味着原来的配置文件也要进行修改才能使其正确运行。
快速上手
- 安装 vuepress
- 安装：
mkdir vuepress2.0.0-beta.61 && cd vuepress2.0.0-beta.61 && yarn add -D vuepress@next
- 安装：
- 安装插件
npm i -D @vuepress/plugin-container@nextnpm i -D @vuepress/plugin-docsearch@nextnpm i -D @vuepress/plugin-pwa@nextnpm install -d vuepress-plugin-anchor-right项目地址yarn add -D vuepress-plugin-sitemap2
- 复制你的文档到新的 vuepress2.0.0-beta.61 目录中：
- docs 目录，但不要包含
.vuepress/{.cache,.temp,dist}这三个目录 - deploy.sh 文件
- .gitignore 文件
- 如果有额外的 config 配置目录也要包含进去
- docs 目录，但不要包含
- package.json 文件添加内容
json
"name": "vuepress-next",
"version": "2.0.0.61",
"main": "index.js",
"license": "MIT",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh"
},1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- vuepress 配置文件 config.js 内容如下：
点击查看 config.js 代码
js
const navConf = require('../../config/navConf.js')
import pluginConf from '../../config/pluginConf.js'
const sidebarConf = require('../../config/sidebarConf.js')
const headConf = require('../../config/headConf.js').default
import { defaultTheme } from '@vuepress/theme-default'
export default {
lang: 'zh-CN',
title: 'EchoXu Note',
description: 'ENote 是一个记录 IT 知识点的文档生成器。IT 知识，文档管理，文档记录，文档生成器',
// base: '/v2/', // 部署时如果地址是：https://192.168.1.20/v2 这里的路径就要写为 /v2/ 如果是 / 就需要注释此项。
head: headConf,
plugins: pluginConf,
theme: defaultTheme({
logo: '/favicon.svg',
docsDir: 'docs',
navbar: navConf,
sidebar: sidebarConf,
sidebarDepth: 0, //https://v2.vuepress.vuejs.org/zh/reference/default-theme/config.html#sidebardepth
lastUpdatedText: '上次更新',
contributorsText: '贡献者',
tip: '提示',
warning: '注意',
danger: '警告',
notFound: [
'这里什么都没有',
'我们怎么到这来了？',
'这是一个 404 页面',
'看起来我们进入了错误的链接',
],
backToHome: '返回首页',
toggleColorMode: '切换夜间模式',
toggleSidebar: '切换侧边栏',
themePlugins: {
externalLinkIcon: false,
},
markdown: {
headers: {
level: [2,3],
},
toc: {
level: [2,3,4,5],
},
code: {
lineNumbers: false
},
},
}),
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
- plugin.js 配置文件内容：
点击查看 plugin.js 代码
js
// import rightAnchorPlugin from 'vuepress-plugin-right-anchor'; // 右侧悬浮导航，不适用 beta0.61
// import searchPlugin from '@vuepress/plugin-search'; // 如果使用默认的搜索插件需要取消注释此行
import containerPlugin from '@vuepress/plugin-container';
import pwaPlugin from '@vuepress/plugin-pwa';
import docsearchPlugin from '@vuepress/plugin-docsearch';
import { sitemapPlugin } from "vuepress-plugin-sitemap2";
import secretKeyConf from './secretKeyConf';
import vuepressPluginAnchorRight from 'vuepress-plugin-anchor-right';
export default [
[vuepressPluginAnchorRight()],
docsearchPlugin({
apiKey: secretKeyConf.apiKey,
appId: secretKeyConf.appId,
indexName: secretKeyConf.indexName,
locales: {
'/': {
placeholder: '搜索文档',
translations: {
button: {
buttonText: '搜索文档',
},
},
},
'/zh/': {
placeholder: '搜索文档',
translations: {
button: {
buttonText: '搜索文档',
},
},
},
},
}),
sitemapPlugin({
hostname: 'https://www.echoxu.cn',
}),
pwaPlugin({
skipWaiting: true,
}),
containerPlugin({
type: 'col2left',
}),
containerPlugin(
{
type: 'col2right',
}),
containerPlugin(
{
type: 'col2leftgray',
}),
containerPlugin(
{
type: 'col2rightbg',
}),
containerPlugin(
{
type: 'col2leftbgcode',
}),
containerPlugin(
{
type: 'col2rightbgcode',
}),
containerPlugin(
{
type: 'collapselist',
before: (info) => `<details class="custom-container collapselist">${info ? `<summary>${info}</summary>` : ''}\n`,
after: () => '</details>\n',
}),
// titlenobg 用来取消背景色
containerPlugin({
type: 'col2leftnobg',
before: (info) =>
`<div class="custom-container col2leftnobg">${info ? `<p class="custom-container-title titlenobg">${info}</p>` : ''}\n`,
after: () => '</div>\n',
}),
containerPlugin({
type: 'col2rightnobg',
before: (info) =>
`<div class="custom-container col2rightnobg">${info ? `<p class="custom-container-title titlenobg">${info}</p>` : ''}\n`,
after: () => '</div>\n',
}),
containerPlugin(
{
type: 'highlight-blue',
}),
containerPlugin({
type: 'highlight-orange',
}),
containerPlugin({
type: 'highlight-red',
}),
containerPlugin({
type: 'highlight-green',
}),
containerPlugin({
type: 'highlight-purple',
}),
containerPlugin({
type: 'highlight-gray',
}),
containerPlugin({
type: 'img-grid',
}),
containerPlugin({
type: 'content-flex',
}),
// 右侧悬浮导航，不适用 beta0.61 https://github.com/xuekai-china/vuepress-plugin-right-anchor
// rightAnchorPlugin({
// customClass: 'customClass',
// showDepth: 4,
// ignore: [
// '/'
// ],
// expand: {
// trigger: 'click',
// clickModeDefaultOpen: true
// }
// }),
// vuepress 默认的搜索插件
// searchPlugin({
// locales: {
// '/': {
// placeholder: 'Search',
// },
// '/zh/': {
// placeholder: '搜索',
// },
// maxSuggestions: 8,
// },
// }),
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
FAQ
- 网站托管在阿里云 oss 后, echoxu.cn 如何跳转到 https://www.echoxu.cn ？
- 打开阿里云云解析，添加一条解析记录，内容为：
@ 显性URL 默认 https://www.echoxu.cn
- echoxu.cn 每次刷新都跳转到主页以及页面内容混乱
- 开启 oss 静态网站子目录，操作路径为：数据管理-静态页面-子目录首页
相关链接：升级到 vuepress2.49