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
}]
]
}
碼字不易，喜歡本篇教程的話給個推薦或者關注，麼麼噠