标签：reco auto theme vuepress rem margin

使用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 
  
  
  本站声明：
  1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
  
  2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
  
  3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
  
  4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
  
  5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。