如何给博客添加看板娘

2021-12-04

如何给博客添加看板娘

2021-12-04

参考Live2D 插件
首先从GitHub上获取项目

引用 CSS 资源

在你网站的 head 标签内引用本项目的 CSS 样式表文件。

1 2	<!-- 引用看板娘交互所需的样式表 --> <link href='https://kwydy.gitee.io/Pio/static/pio.css' rel='stylesheet' type='text/css'/>

引用 JS 资源

在你项目的页尾部分引用本项目的 JS 文件。

<!-- 引用 Live2D 核心组件 -->
<script src='https://kwydy.gitee.io/Pio/static/l2d.js'></script>
<!-- 引用看板娘交互组件 -->
<script src='https://kwydy.gitee.io/Pio/static/pio.js'></script>

插入 DOM 内容

PS：在独立使用的情况下，看板娘的自定位置和高宽无法通过 JS 直接设置，请根据需要自行修改或使用后端语言进行输出。

<div class="pio-container right">
    <div class="pio-action"></div>
    <canvas id="pio" width="280" height="335"></canvas>
</div>

设置启动器

加载完 JS 文件后并不会立即自动生成看板娘，你需要编写一段启动代码来运行看板娘。

<script>
    var pio = new Paul_Pio({
        "mode": "fixed",
        "hidden": false,
        "content": {
            "welcome": ["欢迎来到这个爱酱不太聪明的博客~", "欧尼酱！"],
            "touch": ["今天也是元气满满的一天！", "欧尼酱！", "哈哈哈哈，不要戳了"],
            "skin": ["想看看我的新服装吗？", "新衣服真漂亮~"],
            "home": "点击这里回到首页！",
            "link": "https://kwydy.gitee.io/",
            "close": "QWQ 有缘再会吧~",
            // "referer": "你通过 %t 来到了这里",
            "custom": [
                {
                    "selector": ".comment-form",
                    "text": ["欢迎参与本文评论，别发小广告噢~", "快来参加本文的评论吧~"]
                }
            ]
        },
        "model": ["https://kwydy.gitee.io/rem/model.json"]
    });
    var resourcesPath = '/'; // 指定资源文件（模型）保存的路径
    var backImageName = ''; // 指定背景图片
    var modelDir = ['supa']; // 指定需要加载的模型
    initDefine(resourcesPath, backImageName, modelDir); // 初始化模型
    window.localStorage.clear();    // 清理localStorage
</script>