博客园添加Live2d看板娘

最近给自己的博客添加了个动态的小萝莉,给大家分享一下,效果请见我的博客左下角:

(当然你也可以在自己的html页面引入下面的js来添加小萝莉)

 1.首先最重要的一点你要申请一个博客园账号。

 2.其次申请js权限,找到管理--》设置》--》js权限申请(博客园为了防止大家随便引入js,申请时要说明自己的用途哟,大概一天时间会通过)。

 3.权限通过之后,然后在【页脚html代码】编辑器中插入如下代码

   引入live2d的相关js

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

 初始化js加载我们可爱的小萝莉:

<script>
    L2Dwidget.init({
        "model": {
       //jsonpath控制显示那个小萝莉模型,下面这个就是我觉得最可爱的小萝莉模型 jsonPath:
"https://unpkg.com/live2d-widget-model-chitose@latest/assets/chitose.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中的live2d-widget-model-chitose和chitose.model.json中的chitose来修改小萝莉,

替换的小萝莉效果可以参考这里,点我(引用下大佬的链接,笔芯)

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

 

posted @ 2019-03-15 11:31  张小VV  阅读(1067)  评论(8编辑  收藏  举报