起因
最近准备写个blog,在网上找了许多好的页面参考(其实就是小抄一下)。在一个Typecho爱好者博客中找的了一个特别喜欢的主题(点此查看),于是我充分发挥鲁迅先生的拿来主义。copy copy copy !
但是在copy的过程中有很多问题。首先这个模板是一个基于PHP的主题,而我打算使用Django来做这个Blog。所以要对代码进行修改,所幸万变不离其宗,在转化为Django的过程还是很顺利的。很快雏形就有了,只是那只猫???
这货怎么来的???
这个东西时有时没有,而且网站还会跳出一堆指向原站的连接,后来经过摸索,发现了这玩意怎么来的了。
开始
这只小猫其实是github上的一个开源项目(项目地址)。其实像我这样的半吊子,给码我也不会用。下载项目后不知道怎么加载到自己的Blog中,直接把作者提供的Demo中导入的文件下载,照着Demo的样子引入,结果用不了,控制台报了一推错。
但是原谅我真的没有在这个源码中找到L2Dwidget.min.js文件的影子。好吧,既然你的Demo中有L2Dwidget.min.js,我就直接引用你。TM结果东西还在出来了,这不禁使我反思为什么到本地就不能用了,源码中的lib文件夹下真的没有L2Dwidget.min.js的影子啊。
不放弃的我在网上点来点去找到了L2Dwidget.min.js。
我真是对我自己无语了,就在ghpages@4b846954->lib下,下意识的以为是src了,结果没找到。相比之前多了两个map文件和一个json文件。导入本地,结果还不能运行。
真的没办法了将有L2Dwidget.min.js文件的lib中所有文件复制到src下面没有L2Dwidget.min.js的lib目录下。结果成功了。不说了,整理步骤。
步骤
搭建环境
下载项目将ghpages@4b846954下lib中的文件复制到src的lib目录下,在项目中引入L2Dwidget.min.js(src->lib->L2Dwidget.min.js)
<script src="{% static 'blog/plugins/live2dwidget/lib/L2Dwidget.min.js' %}"></script>
我用的是Django所以有 **{% static ‘path’ %}**的写法,正常写path就可以了。
导入模型包
下载作者的live2d-widget-models项目,将项目中packages复制到自己的项目中。
packages中的每一个文件都是一个模型
这里以shizuku模型为例。进入模型目录->assets,找到shizuku.model.json
这个文件就是选择模型的关键
创建对象
在代码中粘贴,model_name为模型目录名字,其中jsonPath是选择模型的依据。
var model_name = "shizuku";
L2Dwidget.on('*', (name) => {
console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
}).init({
"model": {
jsonPath: "/static/blog/plugins/live2dw-models/packages/live2d-widget-model-"+model_name+"/assets/"+model_name+".model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 200,
"height": 400,
"hOffset": 50,
"vOffset": -50
},
"mobile": {
"show": false, // 移动设备的显示
"scale": 0.3,//移动设备的缩放
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
},
"dialog": {
// 开启对话框
enable: true,
script: {
// 每空闲 10 秒钟,显示一条一言
// 'every idle 10s': '$hitokoto$',
// 当触摸到星星图案
// 'hover .star': '星星在天上而你在我心里 (*/ω\*)',
// 当触摸到角色身体
'tap body': '你摸你妈呢!',
// 当触摸到角色头部
'tap face': '人家已经不是小孩子了!'
}
}
});
总结
到此,模型就可以在你的页面上活蹦乱跳了。