我的是wordpress为基的博客,如果跟我一样可以直接添加喔!
第一步:
需要修改的文件:wp-content/themes/自己的主题/footer.php
在 之前添加如下代码
<!-- 看板娘 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/LonelyFinally/cdn/live2d0/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--此也是看板娘的一部分不过 ui会强行改变 待改进
-->
<div>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/LonelyFinally/sjiaw@1.0/flat-ui.min.css"/>
</div>
<!--此也是看板娘的一部分不过 ui会强行改变 待改进 -->
<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.jsdelivr.net/gh/LonelyFinally/cdn/live2d0/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/LonelyFinally/cdn/live2d0/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
ps:注意:有些博客主题会打乱整个UI 自己找到 <span class=”fui-eye… 等 自己做个css替换就好 如果没事 可直接套用 具体css在标记好了 在下面的css就是 我可是一个个尝试出来的 没有功劳没有苦劳 只剩下疲劳~
第二步:
需要修改的文件:wp-content/themes/自己的主题/header.php
在 前加入如下代码
<!-- 看板娘 -->
<div class="site-content-contain">
<div id="content" class="site-content">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/LonelyFinally/sjiaw@1.0/waifu.css"/>
<script src="https://cdn.jsdelivr.net/gh/LonelyFinally/sjiaw@1.0/jquery.min.js"></script>
<!-- 看板娘 -->
注意:代码框如果复制不全 可从上面的文字往下拉 拉倒记事本再一个个删除 这个代码框后期我有时间了会整个改.
右上角复制
参考
[博客美化]给你博客添加一个萌萌的看板娘吧网页添加 Live2D 看板娘
小白教程之给网页添加Live2D
给博客添加能动的看板娘(Live2D)-关于模型的二三事
休息区:
2020年11月27日