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: "欢迎进来的小耳朵 标签：reco,text,theme,link,vuepress,icon,美化,VuePress
来源： https://www.cnblogs.com/glassysky/p/13387739.html