TIP

早在一年多以前我就喜欢上了 hexo-theme-sagiri 这个主题（效果可以参见 diygod.me (opens new window)），不过当时还什么都不懂啦，不会用 GitHub ，更不知道这居然是静态博客做出来的效果（如果当时知道那么简单的话，我也许现在用的就是 hexo 了 😂）

前些日子因为机缘巧合发现了 sagiri 中的彩带背景的开源实现，原来其出自若干年前 Evan 的个人主页背景，之后我试着简单阅读 vuepress-plugin-nest 插件源码，照喵画虎地摹了个 vuepress-plugin-ribbon 插件，居然真的成功了！这使我萌生了把 sagiri 中一些小组件作为 VuePress 插件实现的想法，之后的几天……

废话说太多了，还是说说怎么用吧 😂

⚠️ 本文章仅针对 VuePress V1，对于 VuePress V2 及 VitePress 没有太多参考意义

# 在背景添加一条彩带

vuepress-plugin-ribbon (opens new window)

只需要简单的配置就可以在你的 VuePress 中添加一条背景彩带~

首先使用 yarn 安装~

yarn add vuepress-plugin-ribbon -D
1

然后在 config.js 中添加以下配置~

module.exports = {
   plugins: [
      [
         'ribbon',
         {
            size: 90, // 彩带的宽度，默认为 90
            opacity: 0.8, // 彩带的不透明度，默认为 0.3
            zIndex: -1, // 彩带的 z-index 属性，默认值为 -1
         },
      ],
   ],
}
1
2
3
4
5
6
7
8
9
10
11
12

然后再次 dev 你就可以发现你的背景多一条彩带啦~

TIP

如果你的彩带会把博客文字覆盖掉，请先尝试调整 z-index 属性，如果无论如何调整都不能有合适的效果，请使用 CSS 为你的主题添加样式覆盖，最简单的方法就是为不想显示彩带的位置添加背景，因为博客主题样式大多不一致，这里就不贴具体修改方式了

# 添加一个动态的标题

vuepress-plugin-dynamic-title (opens new window)

如果你现在使用的是 PC 端的话，试着切换浏览器到其它标签页~

唔，欢迎回来，你应该已经看到效果了~这就是 dynamic-title 的效果~

想要把它装到你的 VuePress 的话，就 yarn 一下吧~

yarn add vuepress-plugin-dynamic-title -D
1

配置稍微有点麻烦，需要提供图标以及相应的文字，不提供时默认是不显示图标的，图标放在 .vuepress/public/ 下就好

module.exports = {
   plugins: [
      [
         'dynamic-title',
         {
            showIcon: '/favicon.ico',
            showText: '(/≧▽≦/)咦！又好了！',
            hideIcon: '/failure.ico',
            hideText: '(●—●)喔哟，崩溃啦！',
            recoverTime: 2000,
         },
      ],
   ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 增加鼠标点击动效

vuepress-plugin-cursor-effects (opens new window)

只需要简单的安装就可以在你的 VuePress 添加鼠标点击后散落彩色粒子的效果~

插件名是 vuepress-plugin-cursor-effects，安装方法应该不用说了吧，配置也很简单，按照下面配置就好

module.exports = {
   plugins: [
      [
         'cursor-effects',
         {
            size: 2, // 粒子大小
            shape: 'star', // 粒子形状（可选 'star' 和 'circle'）
            zIndex: 999999999,
         },
      ],
   ],
}
1
2
3
4
5
6
7
8
9
10
11
12

# 修改你的鼠标为更可爱的样式

这个就不用插件实现了，自己配置下 style/index.styl 就可以了

body {
  cursor: url('/cursor.ico'), auto;
}
1
2
3

找一个你喜欢的鼠标指针放在 public 下就好，当然图片名也记得修改

# 使用悬挂喵作为返回顶部按钮

vuepress-plugin-go-top (opens new window)

相信你看到这个位置应该已经能看到它啦，点一下就可以返回顶部哦~

安装方法就不必说了，由于没什么配置项，直接像下面这样就行

module.exports = {
   plugins: ['go-top'],
}
1
2
3

值得注意的是，由于猫猫在窄屏设备上很容易遮挡内容，因此设计了两个响应式变化点，当屏幕变窄时会依次显示“猫猫” -> 显示“猫爪爪” -> 不显示，具体的响应式变化点你可以在 .vuepress/styles/palette.styl 中自行修改

// 显示猫猫
$MQWide ?= 1440px
// 显示猫爪爪
$MQMobile ?= 768px
// 啥都不显示
1
2
3
4
5

# 添加一个萌萌哒看板娘

vuepress-plugin-live2d (opens new window) Author 聆歌 (opens new window)

plugins: [
   [
      'vuepress-plugin-live2d',
      {
         modelName: '', // 模型名称，可传入一个字符串或者数组
         mobileShow: false, // 是否在移动设备上显示
         position: 'right', // 显示在左下角还是右下角
      },
   ],
]
1
2
3
4
5
6
7
8
9
10

配置详情请在项目主页 (opens new window)查看

感谢聆歌提供本插件，感觉效果不错的可以给他一个 Star 哟~

# 添加一个漂亮的音乐播放器

vuepress-plugin-meting (opens new window)

这个插件是利用 Meting 接口来获取音乐资源，传入 Vue-APlayer，解决 APlayer 的音源问题，当然如果你有合适的音源也可以直接用 Vue-APlayer 哒~

如果你想添加一个全局的吸底播放器，直接在 config.js 中配置即可

module.exports = {
   plugins: [
      'meting',
      {
         meting: {
            server: 'netease', // 音乐源
            type: 'playlist', // 资源类型
            mid: '2539599584', // 资源 id
         },
         aplayer: {
            lrcType: 3,
         },
      },
   ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

另外，它也支持在任何页面单独引入播放器，当然你需要首先在 config.js 启用它（但不必填写配置项，配置项只与全局吸底播放器有关，不配置便不会出现该播放器）

<!-- my-music.md -->
<Meting server="netease"
        type="playlist"
        mid="2539599584"
        :lrc-type="3"/>
<!-- 这样就可以在 my-music.html 页面单独引入一个播放器咯～ -->
1
2
3
4
5
6
7
8

# 最后

再次感谢 DIYGod (opens new window)~