92

博客美化—给你博客添加一个萌萌的看板娘吧 - YJLAugus

 7 years ago
source link: https://www.cnblogs.com/yjlblog/p/8724881.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

文章发布于800天前，可能有所发展或是改变

一直有人问关于博客园看板娘的是如何加上去的，一开始的时候的确踩了很多坑，还有，这个美化博客这个事情，大家还是时刻适可而止的好，不然永远没有尽头，把自己的大好时光全都浪费（滑稽.jpg，用live2d 就可以很简单的加到自己网站上或者个人博客上。在自己个人博客上确实可以很容易的添加，但是在博客园就更简单了（踩坑之后的悔悟）。下面看步骤。

  • 确保自己的博客有js权限，没有的话可以向官方大大申请。
  • 知道如何引用样式和js文件。

引入模型相关文件

在文章末会给出链接

  • waifu.css
  • waifu-tips.js
  • live2d.js
  • flat-ui.min.css//若不加菜单可以不引入

引入样式文件(页首)

text<link rel="stylesheet" type="text/css" href="waifu.css"/>

整体结构(侧边栏)

text<div class="waifu" id="waifu">
		<div class="waifu-tips" style="opacity: 1;"></div>
		<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
		
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script src="live2d.js"></script>
<script src="waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

感谢FGHRSHd提供的api服务。原来的模型是要json格式中写一些提示信息的，因为博客园不允许上传此类型的文件，所以就json文件上传到了自己的个人博客中，谁知道出现了跨域问题。导致的问题就是根本不会出现模型，还有看板娘所有的任务和装扮都是引用的api，最后还是感谢@bndong把json写到了js中，这个模型已经实现了api更换人物模型，和更换人物服装，当然你也可以添加自己想要的功能。如果自己想要更换自己喜欢的人物或者皮肤，可以用自己的api。如果大家觉的还不错的话，可以点点关注嘛(/▽＼=)。

这个是给看板娘添加菜单的，可加可不加，若要添加的话可以把这个层放在 <div class="waifu" id="waifu"></div> 之间。即：

text<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://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script src="live2d.js"></script>
<script src="waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

字体文件是引入不进来的，因为博客园限制了此类文件的上传。值得注意的是，只是这样还不行，菜单会因为缺少字体文件显示不出来，所以我们要把字体文件引入（当然了，也可以用别的，不用这个，但是要改js文件），为了简单，直接引入css样式就好。里面包含了字体样式。其实这是一种偷懒的做法，如果有时间可以去除里面用不到的字体。

text<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

相关文件下载

点下推荐才会下载哦，不然下载会出错的emmmm
可能还要看下这个emmm

win版看板娘

如果你也想在自己的win 桌面上有一个看板娘的话 可以下载哦

链接: https://pan.baidu.com/s/1KpyQtxonRs7ue97ieAP62w 提取码: yjgk

最新版：https://github.com/zenghongtu/PPet

  • 忽略点击；
  • 开机启动；
  • 拖动（按住 Alt）；
  • 放大缩小（ Ctrl / Cmd 和 +、-、0 控制）；
  • 提醒休息（默认 25 分钟）。

插件功能：

  • 选词翻译；
  • 记录剪切板；
  • 日常清理；
  • 自定义对话；
  • 自定义以及更多的型号。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK