个人博客网站升级
思考集结处 2021-11-21 VuePress
个人博客网站升级
# 个人博客网站升级
由于本人学习的一些知识点需要要个地方进行记录，所有之前搞了个静态网站，但是最近看着特别的别扭，所以想想着给它搞得 好看一点，所以说干就干，将网站来个升级。
看这篇文章之前，建议大家，先看这个几篇
# 升级前后对比
升级前
升级后
大家看着升级后的效果还是不错的哈。
# 选择主题
首先我们选择自己喜欢的主题，看过我前面文章的小伙伴都知道，我的网站是基于VuePress进行构建，所以我们找的
主题也是这个方面的，
基于以上的考虑我选择的主题是vuepress-theme-reco
# vuepress-theme-reco介绍
- 这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能
- 主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用
# 安装
首先我们需要将主题进行安装并且进行配置。
- 安装
npm install vuepress-theme-reco --save
# 或者
yarn add vuepress-theme-reco
1
2
3
2
3
- 配置
在你的网站配置文件
.vuepress/config.js中引用主题，并将类型修改为type
module.exports = {
theme: 'reco'
}
1
2
3
2
3
module.exports = {
theme: 'reco',
themeConfig: {
type: 'blog'
}
}
1
2
3
4
5
6
2
3
4
5
6
# 添加分类、标签
这个功能就很实用了，能帮我们将文章进行汇总。效果访问我的网站就可以看到：网站地址
配置如下.vuepress/config.js中
module.exports = {
theme: 'reco',
themeConfig: {
// 博客配置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置，默认2
text: '分类' // 默认文案 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置，默认3
text: '标签' // 默认文案 “标签”
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
配置完成只是第一步，下一步就是在我们写MarkDown文档时，需要在文档的前面，加上如下的代码
---
title: 文章标题
date: 书写时间
sidebar: 'auto'
categories:
- 文章属于哪个分类
tags:
- 文章标签
publish: true
---
::: tip
文章概要
:::
<!-- more -->
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
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
以上信息配置好，会在你的网站首页，形成概要目录，官方所说的
Front Matter，以上信息也包含了时间轴的信息，就是文章首页 是按时间进行倒序排列的。
# 网站首页配置
如本人的网站所呈现的样子，上面的部分是一张图片。那么是如何设置的呢？
找到你的网站首页描述文档README.md将下面的代码拷贝进去就可以了
---
home: true
bgImage: 图片地址
heroImageStyle: {
maxHeight: '200px',
display: block,
margin: '6rem auto 1.5rem',
borderRadius: '50%',
boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
bgImageStyle: {
height: '450px'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 网站效果增强
大家，点击网站的时候，会有点击效果图、点击图片的时候会将图片放大，还有彩带的背景、以及公告牌的设置。这些是咱们配置的呢？ 这个是需要我们安装一些插件的
- 彩带背景安装
npm install vuepress-plugin-ribbon --save
1
- 鼠标点击特效
npm install vuepress-plugin-cursor-effects --save
1
- 动态标题
npm install vuepress-plugin-dynamic-title --save
1
- 图片法放大
npm install @vuepress\plugin-medium-zoom --save
1
# 插件配置
以上的插件我们下载安装完成后，在.vuepress/config.js中进行如下配置
plugins: [
[
//彩带背景
"ribbon",
{
size: 90, // width of the ribbon, default: 90
opacity: 0.8, // opacity of the ribbon, default: 0.3
zIndex: -1 // z-index property of the background, default: -1
}
],
//鼠标点击特效
"cursor-effects",
{
size: 3, // size of the particle, default: 2
shape: ['circle'], // shape of the particle, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
}
[
//动态标题
"dynamic-title",
{
showIcon: "/favicon.ico",
showText: "(/≧▽≦/)咦！又好了！",
hideIcon: "/failure.ico",
hideText: "(●—●)喔哟，崩溃啦！",
recoverTime: 2000
}
],
[
//图片放大插件
'@vuepress\plugin-medium-zoom', {
selector: '.page img',
delay: 1000,
options: {
margin: 24,
background: 'rgba(25,18,25,0.9)',
scrollOffset: 40
}
}
]
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
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
# 整体配置
module.exports = {
base:'',
locales:{
'/':{
lang: 'zh-CN'
}
},
title: '北漂码农有话说',
description: '强化内功、持续改进、不断叠加、保持耐心',
head: [
['link', {rel: 'icon', href: '导航栏小图标'}],
['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }],
[
"script",
{}, `
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "网站分析百度分析工具地址";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
`
]
],
theme: 'reco',
themeConfig: {
author: '北漂码农有话说',
mode: 'dark',
nav: [
{text: '首页', link: '/',icon: 'reco-home'},
{text: 'Java', link: '/java/',icon: 'reco-document'},
{text: '网站', link: '/web/',icon: 'reco-document'},
{text: '容器技术', link: '/container/',icon: 'reco-document'},
{text: '搜索引擎', link: '/search/',icon: 'reco-document'},
{text: '分布式事务', link: '/dis-transaction/',icon: 'reco-document'},
{text: '源码系列', link: '/source-code/',icon: 'reco-document'},
{text: '框架系列', link: '/frame/',icon: 'reco-document'},
{text: '其他', link: '/other/',icon: 'reco-document'},
{text: 'GitHub', link: 'https://github.com/triumphxx',icon: 'reco-github' }
],
sidebar: {
'/java/': [
'',
'network-programming-define',
'network-programming-bio',
'network-programming-nio',
'network-programming-multiplexer',
'network-programming-aio'
],
'/web/': [
'',
'VuePress-Create',
'VuePress-Deploy',
'VuePress-Analysis',
'VuePress-upgrade'
],
'/container/': [
'',
'docker-overview',
'docker-dockerfile',
'docker-network',
'docker-compose',
'docker-se-composition',
'docker-images-maven',
'docker-list'
],
'/search/': [
'',
'es-overview',
'es-install',
'es-start',
'es-mapping',
'es-doc'
],
'/dis-transaction/': [
'',
'tx-lcn-overview',
'tx-lcn-lcn',
'tx-lcn-tcc'
],
'/source-code/': [
'',
'tomcat-compile',
'tomcat-architecture',
'tomcat-lifecycle',/
'tomcat-start-process'
'tomcat-component'
],
'/frame/': [
'',
'Quartz1',
'Quartz2',
'SpringBootMultipleModules',
'SpringCloudEureka',
'SpringCloudProducerConsumer'
],
'/other/': [
'',
'DomainNameRegistration',
'tree'
]
},
logo: '网站logo地址',
type:'blog',
blogConfig: {
category: {
location: 2,
text: '分类',
},
tag: {
location: 2,
text: '标签'
}
},
friendLink: [
{
title: '北漂码农有话说',
desc: '强化内功、持续改进、不断叠加、保存内心',
avatar: '头像地址',
email: 'triumphxx@163.com',
link: 'https://blog.triumphxx.com.cn/'
},
],
search: true,
searchMaxSuggestions: 5,
record: '©2021 triumphxx 京ICP备20026452号',
// 最后更新时间
lastUpdated: '最后更新时间',
// 作者
author: '北漂码农有话说',
// 作者头像
authorAvatar: 'http://cdn.triumphxx.com.cn/img/%E5%A4%B4%E5%83%8F.jpeg',
},
markdown: {
lineNumbers: true
},
plugins: [
[
"@vuepress-reco/vuepress-plugin-kan-ban-niang",
{
theme: ['blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'miku', 'z16'],
clean: false,
messages: {
welcome: '我是北漂码农有话说欢迎你的关注 ',
home: '欢迎来到北漂码农有话说的空间',
theme: '好吧，希望你能喜欢我的其他小伙伴。',
close: '再见哦'
},
width: 240,
height: 352
}
],
[
"ribbon",
{
size: 90, // width of the ribbon, default: 90
opacity: 0.8, // opacity of the ribbon, default: 0.3
zIndex: -1 // z-index property of the background, default: -1
}
],
[
"cursor-effects",
{
size: 3, // size of the particle, default: 2
shape: ['circle'], // shape of the particle, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
}
],
[
"dynamic-title",
{
showIcon: "/favicon.ico",
showText: "(/≧▽≦/)咦！又好了！",
hideIcon: "/failure.ico",
hideText: "(●—●)喔哟，崩溃啦！",
recoverTime: 2000
}
],
[
'@vuepress\plugin-medium-zoom', {
selector: '.page img',
delay: 1000,
options: {
margin: 24,
background: 'rgba(25,18,25,0.9)',
scrollOffset: 40
}
}
],
[
'flowchart'
],
[
'sitemap', {
hostname: 'https://www.glassysky.site'
}
],
['@vuepress/pwa', {
serviceWorker: true,
updatePopup: {
message: "发现新内容可用",
buttonText: "刷新"
}
}
],
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码",
tip: {
content: "复制成功!"
}
}],
["@vuepress-yard/vuepress-plugin-window",{
title: "北漂码农有话说の公告",
contentInfo: {
title: "给个关注呀 🎉🎉🎉",
needImg: true,
imgUrl: "https://cdn.triumphxx.com.cn/%20web/wechart.png",
content: "喜欢博皮可以到博客园关注教程",
contentStyle: ""
},
bottomInfo: {
btnText: '知识点',
linkTo: 'https://blog.triumphxx.com.cn/advertise/'
},
closeOnce: 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
# 小结
以上就是对我的网站做的一个升级，过程不难，但是搞完以后自己还是很满意的，小伙伴们把你的网站也搞起来吧。
