博客园添加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

转载于:https://www.cnblogs.com/barryzhang/p/10535960.html

博客园添加Live2d看板娘相关推荐

博客园添加live2D看板娘和樱花飘落背景
写在前面本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落博客园文章目录写在前面本文使用 ...
博客园增加Live2D看板娘教程，超级简单，一看就懂
目录一.前言二.效果图三.资源准备 1.相关的资源,可以点击下面的网盘链接直接下载 2.也可以通过下面的地址到Gitbuh中下载四.实现教程 1.个人小站实现教程 2.博客园实现教程一.前言 ...
解决博客园添加hexo看板娘无法加载问题
关于添加看板娘因为觉得作者设置的页面左下角的网易云音乐并不实用所以将其改成看板娘但是由于太菜,不能很好的理解live2d的官方文档数次度娘都是一些不能用的版本,不是配置少双引号,就是路径错误,看 ...
【分享】给自己的博客园添加一个板娘（可选）
全部样式分享更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...
【博客插件】Live2d看板娘放到自己的博客上(黑白猫猫+恶魔少女)
文章目录一.前言二.操作步骤一.前言 live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像. ...
Hexo添加Live2D看板娘最新教程
目录前言介绍 Live2D 看板娘添加Live2D看板娘准备工作安装依赖下载model文件添加live2d看板娘到hexo 查看效果发布结束语参考前言上次我们搭建了hexo博客 ...
网页/博客Hexo添加live2d游戏角色看板娘,简易添加，碧蓝航线等live2d新型游戏角色模型（moc3）
目前博客上常见live2d看板娘很多都已经是比较老的了(旧版的是moc文件的)并且相应的插件不支持新版模型(moc3文件),如碧蓝航线的live2d模型.本篇介绍在网页里引入moc3文件的方法示例网 ...
css文件插入背景音乐,博客园添加背景音乐,背景效果!
博客园添加背景音乐,背景效果申请博客园js权限申请话术实例尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...
为博客园添加github跳转链接
一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看. 添加html 首先,需要在设置中添加一段html,用于跳转链接 <a class="git-l ...

博客园添加Live2d看板娘

博客园添加Live2d看板娘相关推荐

最新文章

热门文章