简单介绍
看板娘是一个网站中非常有特色的小功能，可以和访客互动什么的，蛮好玩的。
但是网上大部分的看板娘都是以插件的形式使用的，即你一般只能在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);
3 条评论
emmm……..能导入必剪的纸片人吗
样式可以修改吗？
可以修改为我预定好的参数，也可以修改为自己的Live2D模型链接
"model"
这个是模型链接