为您的Vuepress博客引入插件
Lio 2020-07-30 Vuepress
# vuepress-plugin-ribbon
描述：为你的博客背景添加一条彩带。
插件地址：vuepress-plugin-ribbon (opens new window)
首先安装~
yarn add vuepress-plugin-ribbon -D
# or use npm
npm i vuepress-plugin-ribbon -D
1
2
3
2
3
然后在插件配置中~
module.exports = {
plugins: [
[
"ribbon",
{
size: 90, // 彩带的宽度，默认为 90
opacity: 0.8, // 彩带的不透明度，默认为 0.3
zIndex: -1 // 彩带的 z-index 属性，默认值为 -1
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
最后重新dev，就能看到背景彩带啦，效果如下~
# vuepress-plugin-go-top
描述：单击一只可爱的猫回到顶部！
插件地址：vuepress-plugin-go-top (opens new window)
首先安装~
yarn add vuepress-plugin-go-top -D
# or use npm
npm i vuepress-plugin-go-top -D
1
2
3
2
3
然后在插件配置中~
// .vuepress/config.js
module.exports = {
plugins: ['go-top']
}
1
2
3
4
2
3
4
# vuepress-plugin-dynamic-title
描述：如果你现在使用的是电脑的话，试着切换浏览器到其它标签页~ 欢迎回来，你应该已经看到效果了~这就是 dynamic-title 的效果~
插件地址：vuepress-plugin-dynamic-title (opens new window)
首先安装~
yarn add vuepress-plugin-dynamic-title -D
# or use npm
npm i vuepress-plugin-dynamic-title -D
1
2
3
2
3
然后在插件配置中~
module.exports = {
plugins: [
[
"dynamic-title",
{
showIcon: "/favicon.ico",
showText: "Welcome Back！",
hideIcon: "/favicon.ico",
hideText: "Wait ...",
recoverTime: 2000
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# vuepress-plugin-cursor-effects
描述：为你的 Vuepress 添加鼠标点击后散落彩色粒子的效果~
插件地址：vuepress-plugin-cursor-effects (opens new window)
首先安装~
yarn add vuepress-plugin-cursor-effects -D
# or use npm
npm i vuepress-plugin-cursor-effects -D
1
2
3
2
3
然后在插件配置中~
module.exports = {
plugins: [
[
"cursor-effects",
{
size: 2, // 大小
shape: ['star'| 'circle'], // 散落形状, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# vuepress-plugin-live2d
描述：为你的blog添加一个萌萌的模型、kanbanniang~
插件地址：vuepress-plugin-live2d (opens new window)
首先安装~
yarn add vuepress-plugin-helper-live2d
# or
npm install vuepress-plugin-helper-live2d --save
1
2
3
2
3
然后在插件配置中~
module.exports = {
plugins: [
[
'vuepress-plugin-helper-live2d', {
// 是否开启控制台日志打印(default: false)
log: false,
live2d: {
// 是否启用(关闭请设置为false)(default: true)
enable: true,
// 模型名称(default: hibiki)
model: 'koharu',
display: {
position: "right", // 显示位置：left/right(default: 'right')
width: 135, // 模型的长度(default: 135)
height: 300, // 模型的高度(default: 300)
hOffset: 65, // 水平偏移(default: 65)
vOffset: 0, // 垂直偏移(default: 0)
},
mobile: {
show: false // 是否在移动设备上显示(default: false)
},
react: {
opacity: 0.8 // 模型透明度(default: 0.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
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
让我们来看看效果吧！！！当当当！！！
# vuepress-plugin-meting
描述：一个为你的博客添加播放器的插件~~~
首先安装~
yarn add vuepress-plugin-meting -D
# or use npm
npm i vuepress-plugin-meting -D
1
2
3
2
3
然后在插件配置中~
module.exports = {
plugins: [
'meting', {
metingApi,
meting,
aplayer,
mobile
}
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
以下是我的配置
'meting': {
auto: "https://xxxxxxxxxxxx", //你的歌单的链接，网页歌单链接
meting: {
server: "tencent", //歌单的平台、我这里是QQ音乐的平台
type: "playlist",
mid: "7653249637", //链接后面的id
}, // 不配置该项的话不会出现全局播放器
aplayer: {
lrcType: 3,
autoplay: true
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
播放器效果如下~~~
# End
以后希望有更多的插件进行装饰完善。
撒花花🎉🎉🎉