Butterfly博客优化记录

我的博客地址：https://nuyoah-xlh.github.io/

Caesium+SM.MS实现图片快速加载

Caesium，一款强大的图片批量压缩工具，使用智能压缩算法，支持图像压缩率达到90%的批压缩图像，同时支持JPG、BMP、PNG、GIF、WMF等常用图像格式。

SM.MS是一款强大免费的在线图床，能够方便实现图片引用。

详细教程：Caesium+SM.MS实现图片快速加载

SwitchHosts加速GitHub访问

通过自动修改域名解析，加速GitHub及相关网站的访问：SwitchHosts加速GitHub访问

使用 Vercel 来加速 Hexo 博客

Vercel 提供免费的 serverless 和全局 CDN 服务，使用者只需要通过几步简单的注册以及导入仓库即可完成部署，从个人体验来看，Vercel 现已支持根据 username.github.io 的 master 分支是否变动来启动自动部署。

官网：https://vercel.com

免费CDN加速：jsDelivr+Github

在博客中存在大量的静态资源，尤其是图片，虽然可选择一些在线图床，但依然不太方便，甚至麻烦，效果也不时很如意，而jsDelivr则可以提供免费且高效的CDN服务。部署后直接通过引用即可使用。

详细教程：免费CDN加速：jsDelivr+Github

音乐歌单&&全局吸底播放

音乐界面使用了插件 hexo-tag-aplayer，使用方法请参考插件文档。效果图如下：

电影影单&&豆瓣电影

电影界面使用了插件 hexo-butterfly-douban，使用方法请参考插件文档。效果图如下：

添加卡通人物（看板娘）

安装hexo-helper-live2d插件
```
npm install --save hexo-helper-live2d
```
安装看板娘模型，前往传送门查看预览效果

挑选一个看板娘，记下他的名字，在下面找到他的全名（例如我选了shizuku，那么我就将安装live2d-widget-model-shizuku）

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

安装看板娘，在命令行输入安装命令
```
npm install live2d-widget-model-shizuku
```

找到你博客的本地存储的根目录，打开_config.yml文件，添加下面的内容

# 看板娘
live2d:enable: truescriptFrom: localmodel: use: live2d-widget-model-shizuku #模型选择display: position: right  #模型位置width: 150       #模型宽度height: 300      #模型高度mobile: show: true      #是否在手机端显示

博客卡片滑动效果

在根目录下安装npm插件

npm install hexo-butterfly-wowjs --save

在站点配置文件_config.yml中添加如下内容

# 滑动动画
wowjs:enable: true #控制动画开关。true是打开，false是关闭priority: 2 #过滤器优先级mobile: true #移动端是否启用，默认移动端禁用animateitem:- class: recent-post-item t #必填项，需要添加动画的元素的classstyle: animate__zoomIn #必填项，需要添加的动画duration: 800ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。delay: 200ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。offset: 100 #选填项，开始动画的距离（相对浏览器底部）iteration: 1 #选填项，动画重复的次数- class: card-widgetstyle: animate__zoomIn- class: article-sortstyle: animate__zoomIn