为博客添加看板娘

只需要在博客的页面中引入相关js，css文件， 并添加相应html代码， 即可加入看板娘。

相关文件

waifu.css
waifu-tips.js
live2d.min.js
flat-ui.min.css

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link rel="stylesheet" type="text/css" href="waifu.css" />
<link rel="stylesheet" type="text/css" href="flat-ui.css" />
<!-- 以上引入的css文件路径自填 -->

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<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="live2d.min.js"></script>
<script src="waifu-tips.js"></script>
<!-- 以上引入的js文件路径自填 -->

<script type="text/javascript">initModel()</script>

一些自定义的设置

看板娘位置

在waifu.css文件中， 将 .waifu 中的 left: 0; 改为 right: 0; 可以将看板娘调整至右下角。

菜单选项

打开waifu-tips.js 文件。

找到

1
2
3
4
$('.waifu-tool .fui-home').click(function (){
    window.location = 'https://www.jjq-blog.com/';
//    window.location = $('#Header1_HeaderTitle').attr("href")
});

将其中的链接替换为自定义的首页地址。