通过安装插件使我们的博客页面更加有逼格,炫酷。vuepress (opens new window)提供啦部分内置插件。下面列出我了解的一些插件
# 1.PWA插件
@vuepress/plugin-pwa 自动生成 Service Worker,生成一个刷新按钮,更新网站内容,也能离线访问。
- 安装命令
npm install -D @vuepress/plugin-pwa
- 插件配置:在
config.js
的 pulgin 选项中配置如下
module.exports = {
plugins: [
'@vuepress/pwa',
{
serviceWorker: true,
updatePopup: {
message: '发现新内容可用',
buttonText: '刷新'
}
}
]
}
# 2、看板娘插件
@vuepress-reco/vuepress-plugin-kan-ban-niang (opens new window)看板娘
- 安装命令:
npm install -D @vuepress-reco/vuepress-plugin-kan-ban-niang
- 插件配置:在
config.js
的 pulgin 选项中配置如下:
module.exports = {
plugins: [
'@vuepress-reco/vuepress-plugin-kan-ban-niang',
{
theme: ['haru1', 'whiteCat', 'miku', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16'],
clean: false,
messages: {
welcome: '欢迎来到我的博客',
home: '心里的花,我想要带你回家。',
theme: '好吧,希望你能喜欢我的其他小伙伴。',
close: '你不喜欢我了吗?痴痴地望着你。'
},
messageStyle: { right: '68px', bottom: '290px' },
width: 250,
height: 320
}
]
}
# 3、公告插件
'@vuepress-reco/vuepress-plugin-bulletin-popover (opens new window) 公告插件
- 安装命令:
npm install -D @vuepress-reco/vuepress-plugin-bulletin-popover
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: [
'@vuepress-reco/vuepress-plugin-bulletin-popover',
{
title: '公告',
body: [
{
type: 'title',
content: '欢迎来到我的博客🎉🎉🎉',
style: 'text-align: center;font-size: 15px;font-weight: bold;'
},
{
type: 'text',
content: '博客汇集了个人总结的资料文档,会不定期进行更新!',
style: 'text-align: left;text-indent: 10px;font-size: 13px;'
},
{
type: 'text',
content: '博客中可能存在一些问题,欢迎小伙伴们给我留言.',
style: 'text-align: left;text-indent: 10px;font-size: 13px;'
},
{
type: 'text',
content: '邮箱:874957743@qq.com',
style: 'text-align: left;text-indent: 10px;font-size: 13px;'
}
],
footer: null
}
]
}
# 4、音乐播放器插件
vuepress-plugin-meting (opens new window) 音乐播放插件
- 安装命令:
npm i vuepress-plugin-meting -D
- 插件配置: 在config.js的 pulgin 选项中配置如下:
module.exports={
plugins:[
'meting',
{
meting: {
// 歌单地址-> 如果输入可忽略server|type|mid
auto: 'https://music.163.com/#/playlist?id=2974518382',
// 当前服务为netease -> 网易
server: "netease",
// 类型为歌单
type: "playlist",
// 歌单id
mid: "2974518382",
},
aplayer: {
// 歌单为随机
order: 'random',
// 0为不显示歌词
lrcType: 0,
// 音量
volume: 0.55,
// 开启迷你模式
mini: true,
// 自动播放
autoplay: true
},
},
]
}
# 5.页面彩带插件
ribbon-animation (opens new window) 首页气泡特效
- 安装命令:
npm install -D vuepress-plugin-ribbon-animation
- 插件配置:在config.js的 pulgin 选项中配置如下
module.exports = {
plugins: [
'ribbon-animation',
{
size: 120, // 默认数据
opacity: 0.3, // 透明度
zIndex: -1, // 层级
opt: {
// 色带HSL饱和度
colorSaturation: '80%',
// 色带HSL亮度量
colorBrightness: '60%',
// 带状颜色不透明度
colorAlpha: 0.65,
// 在HSL颜色空间中循环显示颜色的速度有多快
colorCycleSpeed: 6,
// 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
verticalPosition: 'max',
// 到达屏幕另一侧的速度有多快
horizontalSpeed: 200,
// 在任何给定时间,屏幕上会保留多少条带
ribbonCount: 2,
// 添加笔划以及色带填充颜色
strokeSize: 0,
// 通过页面滚动上的因子垂直移动色带
parallaxAmount: -0.5,
// 随着时间的推移,为每个功能区添加动画效果
animateSections: true
},
// 点击彩带 true显示 false为不显示
ribbonShow: false,
// 滑动彩带
ribbonAnimationShow: true
}
]
}
# 6、页面樱花插件
vuepress-plugin-sakura (opens new window) 页面樱花插件
- 安装命令: npm install vuepress-plugin-sakura -D
- 插件配置:在config.js的 pulgin 选项中配置如下
module.exports = {
plugins: [
'sakura',
{
// 默认数量
num: 40,
//是否显示
show: true,
// 层级
zIndex: 100,
img: {
// false 默认图 true 换图 需要填写httpUrl地址
replace: true,
// 绝对路径
httpUrl: ''
}
}
]
}
# 7、趣味动态标题插件
vuepress-plugin-dynamic-title (opens new window)趣味动态标题。
- 安装命令:
npm i vuepress-plugin-dynamic-title -D
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: [
'dynamic-title',
{
showIcon: '/favicon.ico',
showText: '(/≧▽≦/)咦!又好了!',
hideIcon: '/failure.ico',
hideText: '(●—●)喔哟,崩溃啦!',
recoverTime: 2000
}
]
}
# 8、随机名言插件
vuepress-plugin-boxx (opens new window) 默认随机展示名人名句
- 安装命令: npm i vuepress-plugin-boxx -D
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: ['vuepress-plugin-boxx']
}
全局注册啦一个
<BOXX/>
使用效果如下
也可以自定义名言内容
<Boxx title='曦杨说:' content='这博客嘎嘎依嘎斯' />
# 9、代码块复制插件
vuepress-plugin-nuggets-style-copy (opens new window) 代码块复制插件
- 安装命令:
npm i vuepress-plugin-nuggets-style-copy -D
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: [
'vuepress-plugin-nuggets-style-copy',
{
copyText: '复制代码',
tip: {
content: '复制成功!'
}
}
]
}
# 10、鼠标点击特效插件
vuepress-plugin-cursor-effects (opens new window) 鼠标点击特效插件
- 安装命令: npm install -D vuepress-plugin-cursor-effects
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: [
'vuepress-plugin-cursor-effects',
{
// size of the particle, default: 2
size: 4,
// shape of the particle, default: 'star'
shape: 'star',
// z-index property of the canvas, default: 999999999
zIndex: 999999999
}
]
}
# 11、自动侧边栏
vuepress-plugin-auto-sidebar (opens new window) 自动侧边栏
- 安装命令: npm i vuepress-plugin-auto-sidebar -D
- 插件配置:在config.js的 pulgin 选项中配置如下:
module.exports = {
plugins: [
["vuepress-plugin-auto-sidebar", {
// options
}]
]
}
如何不想文章展示侧边栏那么可在Front Matter中添加 autoIgnore。