网站添加live2d看板娘

[liyifanniubi]

太可爱了就折腾了一下。。。。。。。

一. live2d-widget

1. 复制项目文件

live2d-widget

虽然作者说可以一条代码一键部署

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

但是试了一下发现这cdn国内访问慢成shit，而且也不能自己配置文件

所以还是放到自己目录吧

比如我把live2d-widget的文件上传到了https://blog.liyifan.xyz/live2d/目录

2. 修改文件配置

只需要修改autoload.js即可

Important

路径最后需要加上/

• waifuPath的值改为项目路径，我的就是https://blog.liyifan.xyz/live2d/

• tools是看板娘右侧的小工具栏，按需修改

• cdnPath设置为waifuPath的值+live2d_api/，我的就是https://blog.liyifan.xyz/live2d/live2d_api/

因为默认的cdn真的载不出来，live2d_api也得放在自己目录

Note

看板娘位置默认在左下角，通过修改waifu.css中的#waifu可修改位置
修改waifu-tips.json可以自定义气泡内的文字

二、live2d_api

live2d_api

1. 复制项目到live2d目录

我的在https://blog.liyifan.xyz/live2d/live2d_api/

里面包含了几个开源的模型

2. 配置model_list.json来选择自己想要的模型（可选）

删除models内不需要的模型以及材质，同时删除message中的消息。比如变成这样：

{
    "models": [
        [
            "HyperdimensionNeptunia/neptune_classic",
            "HyperdimensionNeptunia/nepnep",
            "HyperdimensionNeptunia/neptune_santa",
            "HyperdimensionNeptunia/nepmaid",
            "HyperdimensionNeptunia/nepswim",
            "HyperdimensionNeptunia/noir_classic",
            "HyperdimensionNeptunia/noir",
            "HyperdimensionNeptunia/noir_santa",
            "HyperdimensionNeptunia/noireswim",
            "HyperdimensionNeptunia/blanc_classic",
            "HyperdimensionNeptunia/blanc_normal",
            "HyperdimensionNeptunia/blanc_swimwear",
            "HyperdimensionNeptunia/vert_classic",
            "HyperdimensionNeptunia/vert_normal",
            "HyperdimensionNeptunia/vert_swimwear",
            "HyperdimensionNeptunia/nepgear",
            "HyperdimensionNeptunia/nepgear_extra",
            "HyperdimensionNeptunia/nepgearswim",
            "HyperdimensionNeptunia/histoire",
            "HyperdimensionNeptunia/histoirenohover"
        ]
    ],
    "messages": [
        "Nep! Nep! 超次元游戏：海王星 系列"
    ]
}

models的顺序就是切换的顺序，默认展示第一个元素中随机选择的一个模型，然后按顺序切换

Caution

原项目中的waifu-tips.js有个小bug，默认modelId为1会导致在模型只有一个的情况下无法正确加载模型 #135，会导致只有一个模型时无法正确加载，替换为waifu-tips.js即可解决

三、加入js脚本

if (window.innerWidth >= 1250) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://blog.liyifan.xyz/live2d/autoload.js';
    document.body.appendChild(script);
}

小屏显示效果不好，限制在1250以上
把脚本加入body

效果图

Gmeek-html<img src="https://img.liyifan.xyz/file/2c0aba70ff4a96a5b06cd.png" data-src="https://img.liyifan.xyz/file/d2ac4a18283a91258ebc2.png" alt="img" width="100%">

太好看了太好看了(❤️ ω ❤️)

Gmeek-html<img src="https://img.liyifan.xyz/file/2c0aba70ff4a96a5b06cd.png" data-src="https://img.liyifan.xyz/file/7febfcdb221992c0a9ee7.jpg" alt="img" width="100%">