【live2D看板娘】为你的网站添加萌萌的二次元板娘,这都拿不下你?

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜
  • 📝 个人主页:馆主阿牛🔥
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏:前端实用小demo🍁
  • 💬格言:要成为光,因为有怕黑的人!🔥
    请添加图片描述

🍊前言

好久没有分享过有趣的东西了,这次我打算分享一个所有人都无法拒绝的前端小demo。相信好多自己搭建博客的盆友们总喜欢搞一个萌萌的二次元板娘,但基本都是网上引入别人封装好的资源,无法进行小部分修改,那么今天阿牛把我之前搞得可以扩展与修改的live2D板娘分享出来,快拿去装扮到你的博客小站去装x吧!

🍑部分板娘展示

请添加图片描述

请添加图片描述

哈哈,好看吧!就展示这些模型哦!这些live2D模型都是我在网上(github)上搜集的,着实花了一些时间!其实博主最喜欢的模型还是第二个橙系萌娘,这个还有酥酥的声音哦!博主对她简直爱死了!

🍑如何在你的网站中加入她们

🍒本地运行

因为代码中涉及live2D静态资源,所以以html文件的方式肯定无法运行它,因为会跨域哦!那么我坚持要在vscode中运行看看效果怎么办,没有关系,vscode中有个叫LiveServer的插件可以帮助你以http通信的方式运行当前代码,这样就可以避免跨域了哦!
在这里插入图片描述
如图,装好这个插件后以open with Live Server的方式打开就可以啦!
在这里插入图片描述
可以看到此时已经不是File文件协议了,而是http。想在本地看效果的赶紧行动起来吧!

🍒加入到你的网站中

看了上面四个模型你一定很激动吧,那么现在我就教你如何在你的网站中加入他们。
在这里插入图片描述
如上图是板娘所需的静态资源,你首先要把他们引入到你的项目中的静态资源中,然后你要在你的html文件中引入下面html。

<div class="pio-container left">
    <div class="pio-action"></div>
    <canvas id="pio" width="200" height="250"></canvas>
</div>
<link rel="stylesheet" href="banniang/css/pio.css">
<script src="banniang/js/pio.js"></script>
<script src="banniang/js/l2d.js"></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,可以找到以下代码:

// 关于我
elements.info.onclick = function () {
      window.open("https://blog.csdn.net/qq_57421630?type=blog");
  };
  elements.info.onmouseover = function () {
      modules.render("想了解更多关于我的信息吗?");
  };
  current.menu.appendChild(elements.info);

其中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博客中引入板娘

博主的博客是用woldpress搭建的,主题是Sakura。
在wp-content/themes/sakura中有个footer.php文件夹,如下图,将代码添加进去就行,然后将静态资源上传到你的博客项目,在model中将路径写对就行。
在这里插入图片描述
效果展示:
在这里插入图片描述
博主的博客小屋美化还是很不错的吧!
网址在这:https://www.aniu.space/

🍑代码以及资源

插入到html中的代码上面已经展示了,接下来我把静态资源放到网盘中,大家自己去提取吧!

链接:https://pan.baidu.com/s/174mg1s0Fe3kn8onAIy3DiA
提取码:waan

博主csdn主页资源中也上传了一份,审核通过后也可以去下载!

🍊结语

如果你觉得博主写的还不错的话,可以关注一下当前专栏,博主会更完这个系列的哦!也欢迎订阅博主的其他好的专栏。

🏰系列专栏
👉flask框架快速入门
👉java 小白到高手的蜕变

其他专栏请前往博主主页查看!

  • 113
    点赞
  • 193
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 94
    评论
live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。 live2d-widget特性: 在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。 你也可以在允许的范围内进行二次开发,这里有一些示例 demo.html ,展现基础效果 login.html ,仿NPM的登陆界面 网页看板娘简短安装: 只需要把下面3行代码放到页面中,即可实现网页看板娘效果。(格式自己进行添加下即可) script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"    live2d-widget详细安装说明: 依赖Dependencies 本插件需要Font Awesome(v4 或 v5)图标支持,请确保相关样式表已在页面中加载。以Font Awesome v4 为例,请在 中加入: link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" 否则图标将无法正常显示。(如果网页中已经加载了任何版本的Font Awesome,就不要重复加载了) 使用Usage 将这一行代码加入或,即可展现出效果: script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js" 如果网站启用了PJAX,由于看板娘不必每页刷新,因此要注意将相关脚本放到PJAX刷新区域之外。 换句话说,如果你是小白,或者只需要最基础的功能,就只用把这一行代码,连同前面加载Font Awesome的一行代码,一起放到html的中即可。 对于用各种模版引擎(例如 Nunjucks,Jinja 或者 PHP)生成的页面,也要自行修改,方法类似,只是可能略为麻烦。以Hexo为例,需要在主题相关的ejs或njk模版中正确配置路径,才可以加载。 但是!我们强烈推荐自己进行配置,否则很多功能是不完整的,并且可能产生问题! 如果你有兴趣自己折腾的话,请看下面的详细说明。 Using CDN 要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为 script src="https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js" 将此处的username 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新,需要创建新的git tag 并推送至GitHub仓库中,否则此处的 @latest 仍然指向更新前的文件。此外CDN本身存在缓存,因此改动可能需要一定的时间生效。 Self-host 你也可以直接把这些文件放到服务器上,而不是通过CDN加载。 如果你能够通过ssh访问你的主机,请把整个仓库克隆到服务器上。执行: cd /path/to/your/webroot # Clone this repository git clone https://github.com/stevenjoezhang/live2d-widget.git 如果你的主机无法用ssh连接(例如一般的虚拟主机),请选择 Download ZIP,然后通过ftp等方式上传到主机上,再解压到网站的目录下。 如果你是通过 Hexo 等工具部署的静态博客,请在博客源文件(即 source)目录下,执行前述的 git clone 命令。重新部署博客时,相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改,可能需要设置 skip_render。 这样,整个项目就可以通过你的服务器 IP 或者域名从公网访问了。不妨试试能否正常地通过浏览器打开autoload.js 和 live2d.min.js 等文件,并确认这些文件的内容是完整和正确的。 一切正常的话,接下来修改一些配置就行了。(需要通过服务器上的文本编辑器修改;你也可以先在本地完成这一步骤,再上传到服务器上) 修改autoload.js中的常量live2d_path为live2d

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 94
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱音斯坦牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值