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，使用方法请参考插件文档。效果图如下：

批注 2021-08-10 214345.jpg

电影影单&&豆瓣电影

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

批注 2021-08-10 214818.jpg

添加卡通人物（看板娘）

  • 安装hexo-helper-live2d插件

    1
    npm install --save hexo-helper-live2d

  • 安装看板娘模型，前往 传送门 查看预览效果

批注 2021-08-10 214818.jpg

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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

  • 安装看板娘，在命令行输入安装命令

    1
    npm install live2d-widget-model-shizuku

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # 看板娘
    live2d:
    	enable: true
    	scriptFrom: local
    	model: 
    		use: live2d-widget-model-shizuku #模型选择
    	display: 
    		position: right  #模型位置
    		width: 150       #模型宽度
    		height: 300      #模型高度
    	mobile: 
    		show: true      #是否在手机端显示

    博客卡片滑动效果

    • 在根目录下安装npm插件

      1
      npm install hexo-butterfly-wowjs --save

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

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