二次元看板娘可以给站点增加不少趣味性。我找了一些开源的代码,然后通过下面的代码可以在站点集成看板娘
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu.css">
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu-tips.js"></script>
<script>
window.addEventListener('load', () => {
// https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/model_list.json
localStorage.setItem("modelId", 2); // 2 -> "bilibili-live/22"
initWidget({
waifuPath: "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu-tips.json",
cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
});
})
</script>
不同的主题引用这部分代码的方式可能有差异。该代码会加载看板娘的样式和模型,并执行相关的初始化代码。最终我们可以在左下角看到bilibili看板娘,
效果如下:
看板娘来源于日语かんばんむすめ,指店铺的女性服务生、活招牌。以上示例代码参考自
https://github.com/stevenjoezhang/live2d-widget,
License为GPL-3.0 license。
模型cdnPath
参数源自https://github.com/fghrsh/live2d_api/tree/master,
模型版权归属于原作者。