一、效果图
相信从事技术开发的朋友们,都有自己的博客。
今天我们来讲讲如何让自己的博客增加一点色彩。
我们来看一张效果图:
右下角有个很乖巧的动漫妹子,鼠标移动,妹子会摇头晃脑~
集成其实很简单,这是一种2D技术,实现方式有挺多中的,业界有比较多的方案,今天我们讲讲L2Dwidget。
博客园、hexo加入这个集成的效果其实很简单的。
下面我们讲讲如何在博客里面引入这动漫妹子模型:
二、博客园添加Live 2D模型
我们在设置找到“博客侧边栏公告(支持HTML代码) (支持 JS 代码)”这项,然后加入以下代码:
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script> <script type="text/javascript"> L2Dwidget.init({ "display": { "superSample": 2, "width": 200, "height": 400, "position": "right", "hOffset": 0, "vOffset": 0 } }); </script>
这样我们就看到这个漫画妹子模型来。
除了这个妹子以外,还有其他的模型,22款随君采。
那么如何使用其他模型呢?具体操作如下:
在 使用L2Dwidget.init初始化的时候,里面增加一个key为model,model对象传入key为jsonPath、scale,然后加上对应的值就可以啦,具体代码如下:
"model": { jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json", "scale": 1 },
jsonPath的值对应的是这个模型json的地址,
相应链接: https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json
例如想用:2D模型全名称: live2d-widget-model-koharu 模型:koharu
链接如下:https://unpkg.com/browse/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
【Tip: 选自己喜欢的模型就可以啦~】
22款模型名称:
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
22款模型效果图地址如下:
https://huaji8.top/post/live2d-plugin-2.0/
三、Hexo博客添加Live 2D模型
这里的安装步骤稍微多了几步,具体操作如下:
1、安装模块
在hexo根目录执行命令
# npm install --save hexo-helper-live2d
2、下载模型
# npm install live2d-widget-model-hibiki
解析:npm install 模型名字
3、增加配置
live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径) pluginJsPath: lib/ # 脚本文件相对与插件根目录路径 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中 log: false model: use: live2d-widget-model-wanko display: position: right 150 height: 300 mobile: show: true # 是否在移动设备上显示 react: opacity: 0.7
这里的model,use模型名字选中自己喜欢的即可。
详细配置地址:https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
github链接地址:https://github.com/EYHN/hexo-helper-live2d
四、结语
本篇分享到这里就结束啦,给朋友们推荐一个前端公众号,里面都是前端技术干货。