使用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 
  标签：reco,auto,theme,vuepress,rem,margin	
  
  来源： https://blog.csdn.net/qq_41327483/article/details/119103300