VuePress博客美化之reco主题

vuepress博客主题—vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题。它既可以成为简洁而又不失美观的主题，又可以书写你的项目文档，看起来更有逼格。

主题官方介绍：

这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能；

主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；

效果：午后南杂

文档：vuepress-theme-reco-doc

如果没有接触过VuePress，这里有一篇指北：

如何使用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
    }]
  ]
}  

码字不易，喜欢本篇教程的话给个推荐或者关注，么么哒