在hugo站点集成看板娘

二次元看板娘可以给站点增加不少趣味性。我找了一些开源的代码,然后通过下面的代码可以在站点集成看板娘

<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
模型版权归属于原作者。

2 Likes

有点意思 :upside_down_face: