vuepress(二)插件安装推荐
文章目录
前言
这里是一个关于vuepress搭建的系列教程,里面也包括了我自己对博客的一些优化和魔改
我的博客👉:一枚前端程序媛的blog
我的面筋小站👉:面筋小站
面筋小站是使用vuepress默认主题开发
我的博客使用gungnir主题开发
我在最开始时用的是 Hexo+butterfly搭建博客,但是后来发现,hexo的界面虽然很好看,但是自认为vuepress的文章分类更清楚,更适合于当做自己的笔记库(而本人就是想搭建一个自己的知识库)。
系列文章
vuepress(四)给vuepress加入githubcalendar贡献日历
二、插件
插件配置在 config.js 文件中
"plugins": [
// 插件的配置
]
每个插件都是一个数组进行配置
1.back-to-top
文章看到下面的时候,点击一个图标会回到顶部
下载:yarn add -D @vuepress/plugin-back-to-top
"plugins": [
['@vuepress/back-to-top'],
]
2.last-updated
文章的末尾会自动显示文章的更新日期
这里的最后更新时间以通过git提交的时间为准,在本地修改文章,时间并不会改变
"plugins": [
['@vuepress/last-updated'],
]
3.看板娘
下载命令:
npm install @vuepress-reco/vuepress-plugin-kan-ban-niang -D
如果使用的是yarn,yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang -D
- 官方文档👉: kanbanniang
我的看板娘配置
['@vuepress-reco/vuepress-plugin-kan-ban-niang',{
theme: ["blackCat"],
clean: false,
info: 'https://github.com/mengqiuleo',
messages: {
welcome: '',
home: '心里的花,我想要带你回家',
theme: '好吧,希望你能喜欢我的其他小伙伴。',
close: '再见哦'
}
}],
4.樱花插件
只要把这个放进 config的plugins中就可以了
// 只要把这个放进 config的plugins中就可以了
["sakura", {
num: 20, // 默认数量
show: true, // 是否显示
zIndex: -1, // 层级
img: {
replace: false, // false 默认图 true 换图 需要填写httpUrl地址
httpUrl: '...' // 绝对路径
}
}]
5.代码复制
下载:
yarn add vuepress-plugin-nuggets-style-copy -D
[
"vuepress-plugin-nuggets-style-copy",
{
copyText: "复制代码",
tip: {
content: "复制成功",
},
},
],
6.添加著作权信息
下载:npm install vuepress-plugin-copyright -D
[
'copyright',
{
authorName: '小飞侠Pan', // 选中的文字将无法被复制
minLength: 30, // 如果长度超过 30 个字符
},
]
7.动态标题展示
下载:npm i vuepress-plugin-dynamic-title -D
['dynamic-title',{
// showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
showText: '(/≧▽≦/)欢迎回来~',
// hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
hideText: '(●—●)bye bye~',
recoverTime: 1000,
}]
8.我的所有插件配置
"plugins": [
['@vuepress/back-to-top'],
['@vuepress/last-updated'],
['@vuepress-reco/vuepress-plugin-kan-ban-niang',{
theme: ["blackCat"],
clean: false,
info: 'https://github.com/mengqiuleo',
messages: {
welcome: '',
home: '心里的花,我想要带你回家',
theme: '好吧,希望你能喜欢我的其他小伙伴。',
close: '再见哦'
}
}],
["sakura", {
num: 30, // 默认数量
show: true, // 是否显示
zIndex: -1, // 层级
img: {
replace: false, // false 默认图 true 换图 需要填写httpUrl地址
httpUrl: '...' // 绝对路径
}
}],
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码",
tip: {
content: "复制成功"
}
}],
['copyright',{
authorName: '小飞侠Pan', // 选中的文字将无法被复制
minLength: 30, // 如果长度超过 30 个字符
}],
['dynamic-title',{
// showIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
showText: '(/≧▽≦/)欢迎回来~',
// hideIcon: 'https://www.typescriptlang.org/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae',
hideText: '(●—●)bye bye~',
recoverTime: 1000,
}]
]