男人变态有什么错
前言
相信很多小伙伴在看其他博客的时候或多或少见过看板娘
有没有想要自己的博客也要一个呢?本博文主要讲解如何在Github Pages上使用此功能
鸣谢
本文主要来自猫与向日葵博客,在此感谢!
引入依赖
本文章里的依赖在本人的项目中都有使用,你可以直接download本人的项目,从中直接复制你需要的文件
css样式
首先,我们需要引入看板娘的样式,可以在这里复制
获得css文件中,将它放入项目的css文件夹下
js文件
jquery
在 js 文件中放入 jquery.js , 这个文件就不提供了,网络上一搜一大堆
live2d
live2d.js 是看板娘的核心,可以在这里复制,如果你下载了本人的开源项目,在文件的/js/目录下可以找到
waifu-tips
看板娘如果要说话的话,就要引入这个JS,可以在这里复制,如果你下载了本人的开源项目,在文件的/js/目录下可以找到
json
model.json
关于看板娘的配置文件,可以在这里复制,如果你下载了本人的开源项目,在文件的/js/目录下可以找到
waifu-tips.json
关于看板娘提示语的配置文件,可以在这里复制,如果你下载了本人的开源项目,在文件的/js/目录下可以找到
html 引入
打开项目中的_includes文件夹,然后打开head.html文件
将下列内容粘贴进去(请注意前后顺序):
<link rel="stylesheet" href="/css/hwaifu.css">
<input type="hidden" id="baseurl" value="">
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<script async src="/js/jquery.min.js"></script>
<script async src="/js/waifu-tips.js"></script>
<script src="/js/live2d.js"></script>
<script type="text/javascript">
loadlive2d("live2d","/js/model.json");
</script>
引入model
前往github上的开源项目中,挑选一个你喜欢的看板娘,本博主使用的是初音
在js目录下新建一个目录,名称为textures,用于存在看板娘的服装
找到你想要的看板娘模型,在/assets/moc/中,将.moc文件复制到/js/文件目录下,然后将/assets/moc/{看板娘的名称}中的png图片复制到 /js/textures 中,改名为default-costume.png
查看效果
将所有的修改提交到io的开源项目中,然后刷新
看板娘已经可以看到了!
后记
本文只是简单地介绍了在GithubPages中使用看板娘,其他功能尚未讲解
其他诸如换肤,留言板等功能都未说明,如果有小伙伴想要了解的话,我再看情况更新几篇和live2d有关的内容
