简介
首先,建议pc端浏览看板娘效果.
为博客添加看板娘的想法来源于博客园添加看板娘,这一资源的最初来源可能是给博客添加能动的看板娘(Live2D)-关于模型的二三事
此处的看板娘,使用的是一种live2D的技术,
引用上面的文章中的介绍:
live2d并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，不能随意使用。
而在网页上部署,算是用js驱动它,当然,live2D技术官方是提供了多平台实现,自然也是包括js网页的,不过,live2D的模型整合,调整,个性化定制是这些第一个吃螃蟹的人的事,我只是一个搬运工,顺便学习一些前端的知识.
值得注意的一点是我并不是搬运最原始的版本,而是经过多次个性化修改的版本,所以在搬运的时候,在资源中发现了一些可能是错误的东西,或者只是我的理解错误,请注意.
如何添加看板娘
准确的讲是如何在我这个博客模板上添加看板娘.
将博客仓库中的assets文件夹复制到需要部署的网页根目录上,再在网页中添加以下语句:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://clq9920.github.io/assets/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://clq9920.github.io/assets/live2d.min.js"></script>
<script src="https://clq9920.github.io/assets/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
将上面html中的https://clq9920.github.io换成对应的网址即可
我的修改过程
我的看板娘是来自于博客园添加看板娘这篇博客,不过直接按照他的过程部署,并不适用于我的博客,因此进行了一定的修改.
第一,网页样式问题:
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/自己博客的Blog地址名/flat-ui.min.css"/>
在原文中,要求在html中加上这一句,这会与我自己博客的布局样式产生矛盾,原因在于flat-ui.min.css就是代表了一种页面布局,自然会对原本的页面产生影响.因此需要删去,不过看板娘本身对此文件有所依赖,需要去依赖后才能去这一句,具体修改为将waifu.css中对应部分修改为
@font-face {
font-family:Flat-UI-Icons;
src:url(https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.eot);
src:url(https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.eot?#iefix) format('embedded-opentype'), url(https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.woff) format('woff'), url(https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.ttf) format('truetype'), url(https://cdn.bootcdn.net/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.svg#flat-ui-icons-regular) format('svg')
}
第二,cdn依赖问题
一些资源需要从cdn下载,不知道为什么,原本的cdn地址无法下载,因此更换了cdn的服务网址.即将https://cdnjs.cloudflare.com换成了https://cdn.bootcdn.net,不过https://cdnjs.cloudflare.com主要出现在flat-ui.min.css中,而此文件我已经删除了,所以影响不到…
第三,个性化修改,参见waifu-tips.js
自定义文字提示,不要忘记将我的博客https://clq9920.github.io替换为自己的博客.
第四,一些奇奇怪怪的语法错误
原本博客中的文件有一些奇怪的语法错误,我按照自己的理解修改了一下.
总结
你问我为什么不在博客主页上放上这个live2D?主要是加载模型比较慢,会让本就缓慢的github博客体验更差,因此我会随机性的在具体的博文中添加看板娘.
在这里感谢这些提供帮助的人,共享真是互联网的一大优点.
