标签：看板娘 博客园 live2D js live2d model 模型

不知道该不该说二次元的力量是不是强大，有好多博客都写了相关的内容，非常可惜的是，我也是一名阿宅，不弄个看板娘说不过去。

代码

首先，需要申请博客园的 js 权限 ，步骤是：管理 -> 设置 -> js权限申请

接着就到页面html代码添加如下代码

• 引入 live2d 的 js：

要注意书写规范，同时奇怪的地方在于原来博客园默认的JS也不是HTML5中的type="text/javascript"，没有这个玩意，我们是无法做到JSONP跨域的

不然会报如下的错误:

Uncaught ReferenceError: L2Dwidget is not defined

<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>

• 初始化 js ，加载模型

<script>
    L2Dwidget.init({
        "model": {
　　　　　　　jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //模型的表现位置
            "width": 150,  //模型的宽度
            "height": 300, //模型的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,  //模型默认透明度
            "opacityOnHover": 0.2
        }
    });
</script>

换模型

假如希望换成其他的模型，可以修改 jsonPath 的路径，格式为：https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json ，在github中可选的模型有~，当然也可以看参考链接。

另外在另一篇博客的也提供了一个各个live2d人物的显示效果的网站

最终效果

现在右下角就有那只白猫了

参考

博客园添加live2d看板娘

文档

官方文档

国内文档hexo-helper-live2d | Easy Hexo

标签：看板娘,博客园,live2D,js,live2d,model,模型
来源： https://www.cnblogs.com/PaturNax/p/16548157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。