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: "歡迎進來的小耳朵 🎉🎉🎉",
needImg: true,
imgUrl: "https://reinness.com/avatar.png",
content: "喜歡博皮可以到博客園關注教程",
contentStyle: ""
},
bottomInfo: {
btnText: '關於',
linkTo: 'https://cnblogs.com/glassysky'
},
closeOnce: false
}]
]
}
碼字不易，喜歡本篇教程的話給個推薦或者關注，么么噠