升级到 vuepress2.49
从 vuepress2.0.0-beta.40 开始,vuepress 使用了新的 api 接口,意味着原来的配置文件也要进行修改才能使其正确运行。
配置文件
请将如下代码放至到 ./vuepress 目录下:
点击查看 config.js
js
const navConf = require('../../config/navConf.js')
const pluginConf = require('../../config/pluginConf.js')
const sidebarConf = require('../../config/sidebarConf.js')
const headConf = require('../../config/headConf.js')
// const secretKeyConf = require('../../config/secretKeyConf')
const { defaultTheme } = require('vuepress')
module.exports = {
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,
lastUpdatedText: '上次更新',
contributorsText: '贡献者',
tip: '提示',
warning: '注意',
danger: '警告',
notFound: [
'这里什么都没有',
'我们怎么到这来了?',
'这是一个 404 页面',
'看起来我们进入了错误的链接',
],
backToHome: '返回首页',
toggleColorMode: '切换夜间模式',
toggleSidebar: '切换侧边栏',
themePlugins: {
externalLinkIcon: false,
},
}),
markdown: {
// headers: {
// level: [2,3,4,5],
// },
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
63
64
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
请将插件配置文件放至到 /config 目录下:
点击查看 pluginConf.js
js
const { rightAnchorPlugin } = require('vuepress-plugin-right-anchor')
//const { searchPlugin } = require('@vuepress/plugin-search')
const { containerPlugin } = require('@vuepress/plugin-container')
const { pwaPlugin } = require('@vuepress/plugin-pwa')
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
const { sitemapPlugin } = require("vuepress-plugin-sitemap2");
module.exports = [
rightAnchorPlugin({
customClass: 'customClass',
showDepth: 4,
ignore: [
'/'
],
expand: {
trigger: 'click',
clickModeDefaultOpen: true
}
}),
// searchPlugin({
// locales: {
// '/': {
// placeholder: 'Search',
// },
// '/zh/': {
// placeholder: '搜索',
// },
// maxSuggestions: 8,
// },
// }),
docsearchPlugin({
apiKey: '你的 api key',
appId: '你的 appID',
indexName: '你的 index',
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',
}),
]
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
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
升级至 2.0.0-beta.49
下载插件
- 下载 vuepress-plugin-right-anchor,此插件已支持 vuepress-2.0.0-beta.49,只是它的 package.json 中版本指定为 2.0.0-beta.45
unzip -o vuepress-plugin-right-anchor-2.1.0-rc.2.zip
安装悬浮目录插件
cd vuepress-plugin-right-anchor-2.1.0-rc.2
- 创建新的 vuepress 目录:
mkdir vuepress
- 修改插件的 package.json 使其支持 vuepress2.0.0-beta.49,需要修改两处
sed -i 's/2.0.0-beta.45/2.0.0-beta.49/g' example/package.json
sed -i 's/2.0.0-beta.45/2.0.0-beta.49/g' package.json
- 删除 vuepress-plugin-right-anchor-2.1.0-rc.2 下的 yarn.lock,防止报错,
rm -rf yarn.lock
- 在 vuepress-plugin-right-anchor-2.1.0-rc.2 下执行:
yarn install
- 复制所需的文件:
cp example/package.json vuepress/
- 将 vuepress-plugin-right-anchor-2.1.0-rc.2/package.json 中 example 全部替换为 vuepress:
sed -i 's/example/vuepress/g' package.json
- 将插件安装到 vuepress 目录:
yarn build:vuepress
安装最新版本的 vuepress
- 为新的 vuepress 安装依赖:
cd vuepress && yarn install
- 复制你的文档到新的 vuepress 中:
- 进入原来的 vuepress 目录然后复制docs 下除了 .vuepress 目录的所有内容到新的 vuepress 下的 docs 目录
- 进入原来的 vuepress 目录然后复制 docs/.vuepress 下的 styles、public、config.js 到新的 vuepress/docs.vuepress 目录下,点我查看配置文件,这里一定不要复制 .cache 和 .temp 目录,dist 目录也不要复制
- 进入原来的 vuepress 目录然后复制 config、deploy.sh、.gitignore
- 如有其它内容也要复制进去,我这里有如下文件需要复制:getmdlinkAfter.txt、getmdlinkBefore.txt、getmdLink.sh、images、imgbak、uploadQN-linux.sh
- 安装需要的插件,插件是否启用相关设置
bash
# 如果使用默认的搜索请使用:@vuepress/plugin-search@2.0.0-beta.49
yarn add -D @vuepress/plugin-docsearch@2.0.0-beta.49
yarn add -D @vuepress/plugin-container@next
yarn add -D @vuepress/plugin-pwa@2.0.0-beta.49
yarn add -D vuepress-plugin-sitemap2
1
2
3
4
5
2
3
4
5
- 使用新的 vuepress
- 将 vuepress 目录移动到 ~/Programe 中
- 运行:cd vuepress && yarn docs:dev
- 部署时需要修改
deploy.sh
中的 vuepress 版本号为 vuepress2.0.0-beta.49
FAQ
问:@vuepress/plugin-search: Uncaught (in promise) Error: useRouteLocale() is called without provider.