为您的Vuepress博客引入插件

自己搭建的第一个纯静态小blog，点击zhangyujie.top/blog，

该blog采用的[Vuepress],也是第一次使用。

过程中走了些许弯路，也在慢慢熟悉中，也慢慢使用一些插件可以来装饰blog。

以下是记录一下搭建blog中可以使用的插件...

vuepress-plugin-ribbon

描述：为你的博客背景添加一条彩带。

插件地址：[vuepress-plugin-ribbon]

首先安装~

yarn add vuepress-plugin-ribbon -D
# or use npm
npm i vuepress-plugin-ribbon -D

然后在插件配置中~

module.exports = {
  plugins: [
    [
      "ribbon",
      {
         size: 90, // 彩带的宽度，默认为 90
         opacity: 0.8, // 彩带的不透明度，默认为 0.3
         zIndex: -1 // 彩带的 z-index 属性，默认值为 -1
      }
    ]
  ]
}

最后重新dev，就能看到背景彩带啦，效果如下~

vuepress-plugin-go-top

描述：单击一只可爱的猫回到顶部！

插件地址：[vuepress-plugin-go-top]

首先安装~

yarn add vuepress-plugin-go-top -D
# or use npm
npm i vuepress-plugin-go-top -D

然后在插件配置中~

// .vuepress/config.js
module.exports = {
  plugins: ['go-top']
}

vuepress-plugin-dynamic-title

描述：如果你现在使用的是电脑的话，试着切换浏览器到其它标签页~ 欢迎回来，你应该已经看到效果了~这就是 dynamic-title 的效果~

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

首先安装~

yarn add vuepress-plugin-dynamic-title -D
# or use npm
npm i vuepress-plugin-dynamic-title -D

然后在插件配置中~

module.exports = {
  plugins: [
    [
      "dynamic-title",
      {
        showIcon: "/favicon.ico",
        showText: "Welcome Back！",
        hideIcon: "/favicon.ico",
        hideText: "Wait ...",
        recoverTime: 2000
      }
    ]
  ]
}

vuepress-plugin-cursor-effects

描述：为你的 Vuepress 添加鼠标点击后散落彩色粒子的效果~

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

首先安装~

yarn add vuepress-plugin-cursor-effects -D
# or use npm
npm i vuepress-plugin-cursor-effects -D

然后在插件配置中~

module.exports = {
  plugins: [
    [
      "cursor-effects",
      {
        size: 2,                    // 大小
        shape: ['star'| 'circle'],  // 散落形状, default: 'star'
        zIndex: 999999999           // z-index property of the canvas, default: 999999999
      }
    ]
  ]
}

vuepress-plugin-live2d

描述：为你的blog添加一个萌萌的模型、kanbanniang~

插件地址：[vuepress-plugin-live2d]

首先安装~

yarn add vuepress-plugin-helper-live2d
# or
npm install vuepress-plugin-helper-live2d --save

然后在插件配置中~

module.exports = {
  plugins: [
    [
      'vuepress-plugin-helper-live2d', {
        // 是否开启控制台日志打印(default: false)
        log: false,
        live2d: {
          // 是否启用(关闭请设置为false)(default: true)
          enable: true,
          // 模型名称(default: hibiki)
          model: 'koharu',
          display: {
            position: "right", // 显示位置：left/right(default: 'right')
            width: 135, // 模型的长度(default: 135)
            height: 300, // 模型的高度(default: 300)
            hOffset: 65, //  水平偏移(default: 65)
            vOffset: 0, //  垂直偏移(default: 0)
          },
          mobile: {
            show: false // 是否在移动设备上显示(default: false)
          },
          react: {
            opacity: 0.8 // 模型透明度(default: 0.8)
          }
        }
      }
    ]
  ]
}

让我们来看看效果吧！！！当当当！！！

vuepress-plugin-meting

描述：一个为你的博客添加播放器的插件~~~

首先安装~

yarn add vuepress-plugin-meting -D
# or use npm
npm i vuepress-plugin-meting -D

然后在插件配置中~

module.exports = {
  plugins: [
    'meting', {
      metingApi,
      meting,
      aplayer,
      mobile
    }
  ]
}

以下是我的配置

'meting': {
        auto: "https://xxxxxxxxxxxx", //你的歌单的链接，网页歌单链接
        meting: {
          server: "tencent",  //歌单的平台、我这里是QQ音乐的平台
          type: "playlist",
          mid: "7653249637", //链接后面的id
        },          // 不配置该项的话不会出现全局播放器
        aplayer: {
          lrcType: 3,
          autoplay: true
        }
      }

播放器效果如下~~~

End

以后希望有更多的插件进行装饰完善。