看板娘是一个网站中非常有特色的小功能，可以和访客互动什么的，蛮好玩的。
但是网上大部分的看板娘都是以插件的形式使用的，插件一般只能在Typecho、WordPress、emlog等程序里使用它，而不能把他放到任意单页网站里。然后我就整合了一下，弄好了一个独立的看板娘，只需要在网站body中任意位置放上指定的代码就可以在网站上实现看板娘效果。

在网站<body></body>之间任意位置放入以下代码即可：

 <!-- 看板娘开始 -->
<link href='https://www.mishi23.com/Live2D/mishi.css' rel='stylesheet' type='text/css'/>
    <!-- 可选位置： left 或 right -->
    <div class="pio-container left">
        <div class="pio-action"></div>
        <!-- 高度和宽度根据每个模型的不同 进行调整 -->
        <canvas id="pio" width="160" height="290"></canvas>
    </div>
    <script src='https://www.mishi23.com/Live2D/l2d.js'></script>
    <script src='https://www.mishi23.com/Live2D/pio.js'></script>
    <script>
        var pio = new Paul_Pio({
            "mode": "fixed",
            "touch": ["点击提示文字在kbn/pio.js中修改"],
            "hidden": false, //手机端是否隐藏
            "referer": "?欢迎来自 %t 的朋友~",
            "content": {
                "welcome": "?欢迎来到本站！"
            },
            // 可用参数：
            // "leimu" "1" "2" "kangna" "qingye" "shawu" "xiaomai" "zhinai"
            
            // 举例子：
            // "model": ["https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1/kbn/ 可修改参数位置 /model.json"],
            
            "model": ["https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1/kbn/xiaomai/model.json"],
            
            "tips": true //如果设置为false则会优先显示welcome中的内容“欢迎~”
        });
    </script>
<!-- 看板娘结束 -->

 

本网站的Live2D看板娘就是以上代码运行之后的效果。