[vuepress部落格主題—vuepress-theme-reco]("https://vuepress-theme-reco.recoluan.com/")是一款簡潔而優雅的 vuepress部落格&文件主題。它既可以成為簡潔而又不失美觀的主題，又可以書寫你的專案文件，看起來更有逼格。 > [這是演示效果](http://glassyskyforgame.gitee.io/glassyskyblog/)     主題官方介紹： > 這是一個vuepress主題，旨在新增部落格所需的分類、TAB牆、分頁、評論等能； > 主題追求極簡，根據 vuepress 的預設主題修改而成，官方的主題配置仍然適用； > 效果：午後南雜 > 文件：[vuepress-theme-reco-doc](https://vuepress-theme-reco.recoluan.com/) 如果沒有接觸過VuePress，這裡有一篇指北： > [如何使用VuePress](https://www.cnblogs.com/softidea/p/10084946.html) ## 如何安裝主題 npx安裝 ```npx npx @vuepress-reco/theme-cli init ``` npm安裝 ```npm //下載@vuepress-reco/theme-cli（這是主題作者給我們提供的腳手架，可以簡化我們的配置） npm npm install @vuepress-reco/theme-cli -g //用腳手架初始化我們的部落格 theme-cli init 在這裡寫你的部落格名字 //安裝部落格所需要的外掛 npm install //執行dev模式 npm run dev ``` yarn ```yarn # 初始化 yarn global add @vuepress-reco/theme-cli theme-cli init ``` 如果沒有接觸過腳手架的可以看這裡 首先 theme-cli init myblog 然後 他會讓你輸入部落格標題，可以在這裡寫，也可以最後在config.js裡寫，所以我就直接敲回車，等以後在配置， 下一條是輸入部落格描述，同上，下一條是部落格作者，同上，下一條有三個選項blog（reco部落格）、doc（文件）、可能是內建主題，因為我們用此專案做部落格，所以選擇blog ，回車後他會從程式碼庫拉取部落格模板，等待一會，可能回報一個錯誤,無視就好 ```code - [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 dev***run不能省略，等待出現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: '[email protected]', 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 } } ``` 更多配置請詳見[部落格配置](https://vuepress-theme-reco.recoluan.com/views/1.x/) ## 外掛 此主題支援vuepress外掛以及外掛廣場中的外掛，[外掛廣場](https://vuepress-theme-reco.recoluan.com/views/other/recommend.html) 這個是我的配置，大家可以參考 ``` 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: '[email protected]', 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: "歡迎進來的小耳朵