简单介绍

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

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

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

效果截图

演示站点Demo

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

安装

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

<!-- 看板娘开始 -->
<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);
Last modification:January 21st, 2022 at 05:37 pm
如果觉得我的文章对你有用,请随意赞赏