如何给博客添加看板娘

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

引用 CSS 资源

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

<!-- 引用看板娘交互所需的样式表 -->  
<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>