VuePress博客美化之reco主题
vuepress博客主题—vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题。它既可以成为简洁而又不失美观的主题，又可以书写你的项目文档，看起来更有逼格。
主题官方介绍：
这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能；
主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
效果：午后南杂
文档：vuepress-theme-reco-doc
如果没有接触过VuePress，这里有一篇指北：
如何安装主题
npx安装
npx @vuepress-reco/theme-cli init
npm安装
//下载@vuepress-reco/theme-cli（这是主题作者给我们提供的脚手架，可以简化我们的配置）
npm npm install @vuepress-reco/theme-cli -g
//用脚手架初始化我们的博客
theme-cli init 在这里写你的博客名字
//安装博客所需要的插件
npm install
//运行dev模式
npm run dev
yarn
# 初始化
yarn global add @vuepress-reco/theme-cli
theme-cli init
如果没有接触过脚手架的可以看这里
首先 theme-cli init myblog
然后 他会让你输入博客标题，可以在这里写，也可以最后在config.js里写，所以我就直接敲回车，等以后在配置，
下一条是输入博客描述，同上，下一条是博客作者，同上，下一条有三个选项blog（reco博客）、doc（文档）、可能是内置主题，因为我们用此项目做博客，所以选择blog
，回车后他会从代码库拉取博客模板，等待一会，可能回报一个错误,无视就好
- [2/3] Edit package.json(node:4820) UnhandledPromiseRejectionWarning: Error: Ca
nnot find module \'D:\test/myblog/docs/.vuepress/config.js\'
拉取完成，我们就基本完成了安装步骤。
然后执行cd 你的博客名，进入到你的博客文件夹，在执行npm install安装依赖，可能会花一点时间，安装完成，就可以执行npm run devrun不能省略，等待出现localhost：8080，我们就可以在浏览器打开localhost：8080看到主题的效果。
配置
配置文件在你的博客文件夹下的.vuepress/config.js
module.exports = {
title: "vuepress-theme-reco", //这里是博客标题
description: \'A simple and beautiful vuepress blog theme .\', //博客描述
dest: \'public\', //博客部署时输出的文件夹
head: [
[\'link\', { rel: \'icon\', href: \'/favicon.ico\' }], //favicon图标设置
[\'meta\', { name: \'viewport\', content: \'width=device-width,initial-scale=1,user-scalable=no\' }]
]
theme: \'reco\', //vuepress挂载的主题
themeConfig: {
//导航栏
nav: [
{ text: \'Home\', link: \'/\', icon: \'reco-home\' }, //text:导航标题内容，icon：图标样式
{ text: \'TimeLine\', link: \'/timeline/\', icon: \'reco-date\' },
{ text: \'Docs\',
icon: \'reco-message\',
items: [
{ text: \'vuepress-reco\', link: \'/docs/theme-reco/\' } //item： 子导航
]
},
{ text: \'Contact\',
icon: \'reco-message\',
items: [
{ text: \'GitHub\', link: \'https://github.com/recoluan\', icon: \'reco-github\' }
]
}
],
//侧边栏设置
sidebar: {
\'/docs/theme-reco/\': [
\'\',
\'theme\',
\'plugin\',
\'api\'
]
},
type: \'blog\',
// 博客设置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置，默认2
text: \'Category\' // 默认 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置，默认3
text: \'Tag\' // 默认 “标签”
}
},
//友情链接
friendLink: [
{
title: \'午后南杂\',
desc: \'Enjoy when you can, and endure when you must.\',
email: \'1156743527@qq.com\',
link: \'https://www.recoluan.com\'
},
{
title: \'vuepress-theme-reco\',
desc: \'A simple and beautiful vuepress Blog & Doc theme.\',
avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
link: \'https://vuepress-theme-reco.recoluan.com\'
},
],
//博客自定义LOGO
logo: \'/logo.png\',
// 搜索设置
search: true,
searchMaxSuggestions: 10,
// 自动形成侧边导航
// sidebar: \'auto\',
// 最后更新时间
lastUpdated: \'Last Updated\',
// 作者
author: \'reco_luan\',
// 作者头像
authorAvatar: \'/avatar.png\',
// 备案号
record: \'xxxx\',
// 项目开始时间
startYear: \'2017\'
/**
* 密钥 (if your blog is private)
*/
//私有仓库key和密码
// keyPage: {
// keys: [\'your password\'],
// color: \'#42b983\',
// lineColor: \'#42b983\'
// },
/**
*评论
* valine 设置 (if you need valine comment )
*/
// valineConfig: {
// appId: \'...\',// your appId
// appKey: \'...\', // your appKey
// }
},
markdown: {
lineNumbers: true
}
}
更多配置请详见博客配置
插件
此主题支持vuepress插件以及插件广场中的插件，插件广场
这个是我的配置，大家可以参考
module.exports = {
base: \'/glassyskyblog/\',
locales: {
\'/\': {
lang: \'zh-CN\'
}
},
title: \'远方有你伴余生\',
description: \'愿时光能缓，愿故人不散！\',
dest: \'public\',
head: [
[\'link\', { rel: \'icon\', href: \'/favicon.ico\' }],
[\'meta\', { name: \'viewport\', content: \'width=device-width,initial-scale=1,user-scalable=no\' }]
],
theme: \'reco\',
themeConfig: {
author: \'远方有你伴余生\',
nav: [
{ text: \'主页\', link: \'/\', icon: \'reco-home\' },
{ text: \'时间轴\', link: \'/timeline/\', icon: \'reco-date\' },
{ text: \'工具推荐\',
icon: \'reco-message\',
items: [
{ text: \'codeSandbox\', link: \'https://codesandbox.io\',icon: \'reco-coding\' },
{ text: \'正则表达式手册\', link: \'https://tool.oschina.net/uploads/apidocs/jquery/regexp.html\', icon: \'reco-coding\' }
]
},
{ text: \'关于\',
icon: \'reco-message\',
items: [
{ text: \'GitHub\', link: \'https://github.com/glassy-sky-lisong\', icon: \'reco-github\' },
{ text: \'博客园\', link: \'https://cnblogs.com/glassysky\', icon: \'reco-bokeyuan\' },
{ text: \'掘金\', link: \'https://juejin.im\', icon: \'reco-juejin\' },
{ text: \'哔哩哔哩\', link: \'https://space.bilibili.com/476991968\', icon: \'reco-bilibili\' },
{ text: \'码云\', link: \'https://gitee.com/glassyskyforgame\', icon: \'reco-mayun\' },
{ text: \'Twitter\', link: \'https://twitter.com/GLASSYSKY113\', icon: \'reco-twitter\' }
]
}
],
sidebar: {
\'/docs/theme-reco/\': [
\'\',
\'theme\',
\'plugin\',
\'api\'
]
},
type: \'blog\',
// 博客设置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置，默认2
text: \'分类\' // 默认 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置，默认3
text: \'标签\' // 默认 “标签”
}
},
friendLink: [
{
title: \'午后南杂\',
desc: \'Enjoy when you can, and endure when you must.\',
email: \'1156743527@qq.com\',
link: \'https://www.recoluan.com\'
},
{
title: \'远方有你伴余生\',
desc: \'愿时光能缓，愿故人不散！\',
avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
link: \'https://vuepress-theme-reco.recoluan.com\'
},
],
logo: \'/logo.png\',
// 搜索设置
search: true,
searchMaxSuggestions: 10,
// 自动形成侧边导航
// sidebar: \'auto\',
// 最后更新时间
lastUpdated: \'最后更新时间\',
// 作者
author: \'远方有你伴余生\',
// 作者头像
authorAvatar: \'/avatar.png\',
// 备案号
record: \' 远方有你伴余生\',
// 项目开始时间
startYear: \'2017\',
/**
* 密钥 (if your blog is private)
*/
// keyPage: {
// keys: [\'your password\'],
// color: \'#42b983\',
// lineColor: \'#42b983\'
// },
/**
* valine 设置 (if you need valine comment )
*/
valineConfig: {
appId: \'uVX1RdW5NvC6zEnfjERU7mAb-gzGzoHsz\',// your appId
appKey: \'DzzpF7cokBfNP107e5OjMKtQ\', // your appKey
}
},
markdown: {
lineNumbers: true
},
plugins: [
[
//先安装在配置， npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save
"@vuepress-reco/vuepress-plugin-kan-ban-niang",
{
theme: [\'blackCat\', \'whiteCat\', \'haru1\', \'haru2\', \'haruto\', \'koharu\', \'izumi\', \'shizuku\', \'wanko\', \'miku\', \'z16\'],
clean: false,
messages: {
welcome: \'我是lookroot欢迎你的关注 \',
home: \'心里的花，我想要带你回家。\',
theme: \'好吧，希望你能喜欢我的其他小伙伴。\',
close: \'再见哦\'
},
width: 240,
height: 352
}
],
[
//先安装在配置， npm install @vuepress-plugin-meting --save
\'meting\', {
metingApi: "https://api.i-meto.com/meting/api",
meting: {
server: "netease",
type: "playlist",
mid: "621465725"
}, // 不配置该项的话不会出现全局播放器
aplayer: {
lrcType: 3
}
}
],
[
//彩带背景 先安装在配置， npm install vuepress-plugin-ribbon --save
"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
}
],
[
//鼠标点击特效 先安装在配置， npm install vuepress-plugin-cursor-effects --save
"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
}
],
[
//动态标题 先安装在配置， npm install vuepress-plugin-dynamic-title --save
"dynamic-title",
{
showIcon: "/favicon.ico",
showText: "(/≧▽≦/)咦！又好了！",
hideIcon: "/failure.ico",
hideText: "(●—●)喔哟，崩溃啦！",
recoverTime: 2000
}
],
[
//图片放大插件 先安装在配置， npm install @vuepress\plugin-medium-zoom --save
\'@vuepress\plugin-medium-zoom\', {
selector: \'.page img\',
delay: 1000,
options: {
margin: 24,
background: \'rgba(25,18,25,0.9)\',
scrollOffset: 40
}
}
],
[
//插件广场的流程图插件 先安装在配置 npm install vuepress-plugin-flowchart --save
\'flowchart\'
],
[
//插件广场的sitemap插件 先安装在配置 npm install vuepress-plugin-sitemap --save
\'sitemap\', {
hostname: \'https://www.glassysky.site\'
}
],
[\'@vuepress/pwa\', {
serviceWorker: true, //vuepress插件PWA 先安装在配置 npm install @vuepress/pwa --save
updatePopup: {
message: "发现新内容可用",
buttonText: "刷新"
}
}
],
["vuepress-plugin-nuggets-style-copy", {
copyText: "复制代码", //vuepress复制粘贴提示插件P 先安装在配置 npm install vuepress-plugin-nuggets-style-copy --save
tip: {
content: "复制成功!"
}
}],
["@vuepress-yard/vuepress-plugin-window",{
title: "远方有你伴余生の公告", //vuepress公告插件 先安装在配置 npm install @vuepress-yard/vuepress-plugin-window --save
contentInfo: {
title: "欢迎进来的小耳朵
版权声明：本文为glassysky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。