如何使用VuePress从头制作一份专属博客

前言：

周末放假时，看了很多技术博客，很是心动，于是乎。。。天晴了雨停了，我又觉得我行了，起初是打算用hexo搭建的，不过后来看到了vuepress和vuepress-theme-reco，并且我对vue这块了解也比较多，就采用了这两个框架，刚开始我还以为是一件比较容易的事情，殊不知和普通的项目开发并不一样，导致走了很多坑，真是太难了。。。

Mr.Mao'blog：tuimao233.gitee.io/mao-blog/

项目构建

先决条件（vuepress）：vuepress

安装主题：npm install vuepress-theme-reco --save-dev

项目构建完毕后，只需要对config.js中添加插件和配置就差不多啦~~~

基本配置

module.exports = {
  // ....
  // 主体选择为 reco
  theme: 'reco'
  // ....
  themeConfig: {
    // 类型为博客
    type: 'blog', 
    // 是否自动展开右侧子导航
    subSidebar: 'auto',
    // 博客信息
    author: 'Mr.Mao',
    authorAvatar: '/avatar.png',
    logo: '/avatar.png',
    startYear: '2020',
    // 博客配置
    blogConfig: {
      tag: {
        location: 6,     // 在导航栏菜单中所占的位置，默认3
        text: '标签'      // 默认文案 “标签”
      }
    },
    // 评论配置(valine)
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
    // 友情分享
    friendLink: [
      {
        title: '午后南杂',
        desc: 'Enjoy when you can, and endure when you must.',
        email: 'recoluan@qq.com',
        link: 'https://www.recoluan.com'
      },
    ],
  }
}

首页配置

bgImageStyle 为自定义背景图片样式

---
home: true
bgImage: '/bg.jpg'
bgImageStyle: {
  height: '350px'
}
---

config.js 插件配置

鼠标点击特效

安装：npm i vuepress-plugin-cursor-effects -D

插件地址：vuepress-plugin-cursor-effects

module.exports = {
  plugins: {
    // 鼠标点击特效
    "cursor-effects": {
      size: 2,
      shape: 'circle',  // 点击形状: 'star', 'star' | 'circle'
      zIndex: 999999999
    },
  }
}

音乐播放器

安装：npm i vuepress-plugin-meting -D

插件地址：vuepress-plugin-meting

module.exports = {
  plugins: {
    // 鼠标点击特效
    "meting": {
      meting: {
        // 歌单地址-> 如果输入可忽略server|type|mid
        // 但是不知道为什么不写上这三个会报错, 所以我都写上了
        auto: 'https://music.163.com/#/playlist?id=5312894314',
        // 当前服务为netease -> 网易
        server: "netease",
        // 类型为歌单
        type: "playlist",
        // 歌单id
        mid: "5312894314",
      },
      aplayer: {
        // 歌单为随机
        order: 'random',
        // 0为不显示歌词
        lrcType: 0,
        // 音量
        volume: 0.15,
        // 开启迷你模式
        mini: true,
        // 自动播放
        autoplay: true
      },
    },
  }
}

2d 看板娘

安装：npm i vuepress-plugin-helper-live2d -D

插件地址：vuepress-plugin-live2d

module.exports = {
  plugins: {
    'vuepress-plugin-helper-live2d': {
      // 是否开启控制台日志打印(default: false)
      log: true,
      live2d: {
        // 是否启用(关闭请设置为false)(default: true)
        enable: true,
        // 模型名称(default: hibiki)
        model: 'koharu',
        display: {
          vOffset: -55, //  垂直偏移(default: 0)
        },
        mobile: {
          show: false // 是否在移动设备上显示(default: false)
        },
        react: {
          opacity: 0.8 // 模型透明度(default: 0.8)
        }
      }
    },
  }
}

动态网页标题

安装：npm i vuepress-plugin-dynamic-title -D

插件地址：vuepress-plugin-dynamic-title

module.exports = {
  plugins: {
    // 动态标题配置
    "dynamic-title": {
      showIcon: "/favicon.ico",
      showText: "(/≧▽≦/)咦！又好了！",
      hideIcon: "/failure.ico",
      hideText: "(●—●)喔哟，崩溃啦！",
      recoverTime: 2000
    },
  }
}

定制样式

修改主题颜色

主体色的配置在.vuepress/styles/palette.styl中定义

// 默认值
$accentColor = #3eaf7c                      // 主题颜色
$textColor = #2c3e50                        // 文本颜色
$borderColor = #eaecef                      // 边框线颜色
$codeBgColor = #282c34                      // 代码块背景色
$backgroundColor = #ffffff                  // 悬浮块背景色

添加或修改主题样式

修改主题在.vuepress/styles/palette.styl中定义

.content {
  font-size 30px
}