好久没有分享过有趣的东西了，这次我打算分享一个所有人都无法拒绝的前端小demo。相信好多自己搭建博客的盆友们总喜欢搞一个萌萌的二次元板娘，但基本都是网上引入别人封装好的资源，无法进行小部分修改，那么今天阿牛把我之前搞得可以扩展与修改的live2D板娘分享出来，快拿去装扮到你的博客小站去装x吧！
????部分板娘展示
哈哈，好看吧！就展示这些模型哦！这些live2D模型都是我在网上上搜集的，着实花了一些时间！其实博主最喜欢的模型还是第二个橙系萌娘，这个还有酥酥的声音哦！博主对她简直爱死了！
????如何在你的网站中加入她们
????本地运行
因为代码中涉及live2D静态资源，所以以html文件的方式肯定无法运行它，因为会跨域哦！那么我坚持要在vscode中运行看看效果怎么办，没有关系，vscode中有个叫LiveServer的插件可以帮助你以http通信的方式运行当前代码，这样就可以避免跨域了哦！如，装好这个插件后以openwithLiveServer的方式打开就可以啦！可以看到此时已经不是File文件协议了，而是http。想在本地看效果的赶紧行动起来吧！
????加入到你的网站中
看了上面四个模型你一定很激动吧，那么现在我就教你如何在你的网站中加入他们。如上是板娘所需的静态资源，你首先要把他们引入到你的项目中的静态资源中，然后你要在你的html文件中引入下面html。
<p class="pio-container left">
<p class="pio-action"></p>
<canvas id="pio" width="200" height="250"></canvas>
</p>
<link rel="stylesheet" href="banniang/css/pio.css">
<script src="/images/defaultpic.gif"></script>
<script src="/images/defaultpic.gif"></script>
<script>
var pio = new Paul_Pio({
"mode": "fixed",
"tips": true,
"hidden": true,
"content": {
"welcome": ["欢迎来到阿牛的网站！", "博主每天都有些折腾记录，欢迎前往他的小窝阅读~"],
},
"model": [
"banniang/live2d-widget-models/live2d-widget-model-miku/assets/miku.model.json", //初音
"banniang/live2d-widget-models/live2d-widget-model-shizuku/assets/shizuku.model.json",// 萌娘
"banniang/live2d-widget-models/live2d-widget-model-chitose/assets/chitose.model.json",
"banniang/live2d-widget-models/live2d-widget-model-koharu/assets/koharu.model.json",
"banniang/live2d-widget-models/live2d-widget-model-haru/01/assets/haru01.model.json",
"banniang/live2d-widget-models/live2d-widget-model-wanko/assets/wanko.model.json",
"banniang/live2d-widget-models/live2d-widget-model-vert/vert_classic/vert_classic.model.json",
"banniang/live2d-widget-models/live2d-widget-model-nepgear_extra/nepgear_extra/nepgear_extra.model.json",
"banniang/live2d-widget-models/live2d-widget-model-haruto/assets/haruto.model.json",
"banniang/live2d-widget-models/live2d-widget-model-haru/02/assets/haru02.model.json",
"banniang/live2d-widget-models/live2d-widget-model-histoire/histoire/histoire.model.json",
"banniang/live2d-widget-models/live2d-widget-model-blanc_normal/blanc_normal/blanc_normal.model.json",
]
});
</script>
到此你就可以使用了！
????自定义部分内容
我长篇大论难道只是为了引入她吗，大可不必，网上有封装好的，一行代码引入不香吗！当然是为了更好的修改源代码，真正弄成“我们自己的”！还记得当时在网上找到比较合适的这个资源时，各种报错，当时，博主的前端学的很差或者说基本没咋学，所以令我记忆犹新的是当时花了三天时间才把他搞好，因为喜欢，所以坚持，幸好成功了！直至今日，博主依旧在博客小站或者一些合适的小项目中使用它！那么我们来看看有哪些地方可以修改吧！
????修改板娘的位置与大小
如，第一处是修改板娘在网页中的展示位置，这里有两个选项，左下角和右下角，分别是left和right，看个人习惯修改！第二处就是板娘的大小。
????修改引入板娘资源的多少
如，这个model中是模型列表，对应的是live2D模型中的json文件。这里博主建议引入自己喜欢的两三个就行，多了消耗资源。如，json文件中是一些live2d资源信息。我分享的这个live2d看板娘有扩展性，你可以自定义。当然你在网上找资源时，资源里也要有这个json接口文件。
????让板娘右侧按钮点击跳转到自己的csdn主页
如，相信你引入的网上封装好的跳转的是开发者自己的链接吧！没关系哦！今天博主分享的这个可以修改哦！可以绑定你的csdn主页！打开js文件中的pio.js，可以找到以下代码：
其中window.open中放你的csdn主页链接就好！
????修改板娘触摸提示词
我们在用鼠标点击板娘身体时，头顶会有提示词。也是可以修改的哦！依旧是打开js文件中的pio.js，可以找到以下代码：
// 触摸
touch: function () {
current.canvas.onclick = function () {
modules.render(prop.content.touch || ["你在干什么？","干嘛动我呀！小心我咬你！","非礼呀！救命！","再摸的话我可要报警了⌇●﹏●⌇","是···是不小心碰到了吧~~~","110 吗，这里有个变态一直在摸我(ó﹏ò)", "HENTAI!", "不可以这样欺负我啦！","萝莉控是什么呀？", "你看到我的小熊了吗？"]);
};
},
在modules.render中的列表中修改你的提示词！
????bug解决
上面的自定义就写这些，如果还有要修改的，自己去看看源代码哦！下面我来说说一个bug。我在拿到这个代码时，当时他这个库l2d.js运行起来总是报错，报错内容大改就是我点击当前页面，控制台这个7000多行的js库总是报错，但是不影响项目。对于这个控制台报错我看着难受，然后就网上找办法处理了，嘿嘿嘿~~~在l2d.js文件最后加入以下代码：
function ResumeError() {
return true;
}
window.onerror = ResumeError;
这三行代码可以帮助我们忽略l2d.js文件的报错！
????在你的woldpress博客中引入板娘
????代码以及资源
插入到html中的代码上面已经展示了，接下来我把静态资源放到网盘中，大家自己去提取吧！
博主csdn主页资源中也上传了一份，审核通过后也可以去下载！
????结语
????系列专栏????flask框架快速入门????java小白到高手的蜕变
其他专栏请前往博主主页查看！
文章为作者独立观点，不代表股票交易接口观点
相关文章
股民评论