此文章收集了butterfly页面设计的部分参考资料和博客。

博客基础

内容添加

自定义html页面

将包含网页的文件夹放入source文件夹中，可以创建一个名为HTML的文件夹用于放置所有HTML文件；

跳过渲染

skip_render:

- “xxxx.html”

跳过文件夹下所有文件

skip_render:

- “文件夹名/*”

跳过子文件夹

skip_render:

- “文件夹名/子文件夹名/*”

跳过文件夹下所有子文件夹和文件

skip_render:

- “文件夹名/**”

然后在博客根目录的_config.yml配置文件设置跳过渲染：

Hexo博客技巧：添加自定义html页面_hexo里html-CSDN博客

页面美化

这篇博客包括了大部分的魔改内容

首页 | Butterfly主题美化教程 (zhheo.com)

butterfly 重装日记 | 安知鱼 (anheyu.com)

动态背景效果

樱花：Hexo添加樱花动态效果背景 | 花猪のBlog (gitee.io)

预加载动画

编写加入自定义动画

Loading Animation | Akilarの糖果屋

随机封面

hexo butterfly主题添加对随机图片api的支持 | Mitsumune

看板娘

inject：👉Live2dLoader-web-集成渲染库 | ⭐️齐下无贰⭐️ (270916.xyz)

在butterfly的config添加：

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
    - <script src="https://cdn.jsdelivr.net/combine/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js,npm/pixi.js@6.5.2/dist/browser/pixi.min.js,npm/pixi-live2d-display/dist/index.min.js,gh/Weidows-projects/Live2dLoader/dist/Live2dLoader.min.js"></script>
  bottom:
    # - <script src="xxxx"></script>
    # 切换角色修改role地址即可
    - <script>addEventListener("DOMContentLoaded",function(){let models=[{width:250,height:500,left:'1vw',top:'60vh',scale:0.2,role:"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json",background:"",opacity:1,draggable:true,},];new Live2dLoader(models)})</script>
    # 我使用的：
   - <script>addEventListener("DOMContentLoaded",function(){let models_1=[{scale:0.07,width:500,height:400,left:'-4vw',bottom:'0vh',role:"https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets/lafei_4/lafei_4.model3.json",background:"",opacity:1,mobile:false,draggable:true,},];new Live2dLoader(models_1)})</script>