简单介绍

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

注意：这不是插件，而是一串代码，你可以在任意网站上实现它。

看板娘的诞生离不开Pio及Live2D

效果截图

演示站点Demo

① https://zxz.ee 【博客程序站点】
② https://pan.zxz.ee 【静态页面站点】

安装

在网站之间任意位置放入以下代码即可

<!-- 看板娘开始 -->
<link href='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/pio.css' rel='stylesheet' type='text/css'/>
    <!-- 可选位置： left 或 right -->
    <div class="pio-container left">
        <div class="pio-action"></div>
        <!-- 高度和宽度根据每个模型的不同 进行调整 -->
        <canvas id="pio" width="170" height="295"></canvas>
    </div>
    <script src='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/l2d.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.1-2/kbn/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模型，将"model"后面的改为自己的即可

相关可更改内容已经在代码中声明

PJAX 相关设定

如果你的主题有 PJAX 功能，可使用以下方法重载本插件。重载后即可避免因在 PJAX 切换页面后，因 DOM 刷新导致看板娘显示异常的问题。

pio.init();
参数名是否必填描述
onlyText选填为 true 时，仅刷新文字内容，不重新渲染看板娘

如使用 AJAX 插入了一个新元素后，执行下面的方法仅刷新文字相关的功能，并重新为选择器指定的元素添加事件。

pio.init(true);
最后修改：2022 年 11 月 14 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏