使用vuepress-theme-reco搭建自己的博客
vuepress-theme-reco是VuePress的一个主题,大家可以参考VuePress和其他主题,搭建你自己风格的主题,这篇主要讲解vuepress-theme-reco主题的博客。
VuePress是静态网页生成器,通过它,可以迅速的将我们的Markdown笔记变成网页,方便我们翻阅,查找。
一、初始化项目
1、引入vuepress-theme-reco主题
npm install vuepress-theme-reco --save-dev
2、使用官方的模板初始化项目
theme-cli init blogs
按要求输入内容
将在你的文件夹下生成你项目名的文件夹,我这里是blog.
3、运行
进到文件夹内,使用cmd执行
npm install
npm run dev
至此博客已经可以正常使用了,但是我们打开官方的案例,往往比我们现在的效果要好,我们需要优化的继续往下看。
二、优化页面
1、官方的功能
像评论、时间线、域名的配置、多语言、暗色适配、侧边栏、文档的摘要…官方写的已经很详细,这里就不再介绍,按照官方文档配置即可。如果有疑问,可以在下面评论,咨询我。
2、看板娘
-
引入依赖:
npm i @vuepress-reco/vuepress-plugin-kan-ban-niang
-
配置
在config.js下的module.exports加入如下代码,可参考npm:
plugins: [ [ '@vuepress-reco/vuepress-plugin-kan-ban-niang',{ theme: [ 'miku', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16' ], clean: false, messages: { welcome: '欢迎来到我的博客', home: '心里的花,我想要带你回家。', theme: '好吧,希望你能喜欢我的其他小伙伴。', close: '你不喜欢我了吗?痴痴地望着你。' }, messageStyle: { right: '68px', bottom: '290px' }, width: 250, height: 320 } ], ],
-
效果图
3、公告
-
安装依赖:
npm i @vuepress-reco/vuepress-plugin-bulletin-popover
-
修改配置:在config.js下的module.exports的plugin下加入以下代码:
['@vuepress-reco/vuepress-plugin-bulletin-popover', { title: '公告', body: [ { type: 'title', content: '欢迎加我的QQ/vx