博客园看板娘的简单添加

  emmmm.....今年开始问我博客看板娘怎么添加的人多了起来,之前问我的,我都是告知其去了解Live2D的东西就行了,现在还是顺手写一下吧。

  对于前端,我一无所知,所以这边就直接引用别人的东西了。大概有如下两种方法(需要开通博客相关的CSS/JS权限)

-------------------------------------第一种方法---------------------------------

页面定制css 放上:
/* 看板娘 */
canvas#live2dcanvas {
border: 0 !important;
left: 0;
}
页脚Html代码放上:
/* 看板娘 */ 
<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init();
</script>

 

-------------------------------------第二种方法-----------------------------------

页首:
<!-- 左下角live2d效果 -->
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>

页脚:
<!-- 左下角live2d效果 --> <script type="text/javascript"> setTimeout(()=>{ L2Dwidget.init({ "model": { "scale": 0.5 }, "display": { "position": "left", "width": 180, "height": 260, "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); },1000) </script>

----------------------------------------------------------分割线----------------------------------------------------------------

  有前端知识的看官,我推荐去看另一位大佬的博客,应该是博客园中把博客装饰成二次元风格的所有人中Top10的存在,传送门:YJLAugus

  我因为前端知识的匮乏,导致现在这个看板娘没什么“灵魂”,以后希望自己能做个满意的炮姐看板娘出来。

posted @ 2019-04-17 11:01  zzz紫川  阅读(1509)  评论(1编辑  收藏  举报