博客园添加看板娘

参考地址:https://www.cnblogs.com/im13htx/p/11703672.html

1、选择样式
决定看板娘在哪里显示,左还是右

2、将相关文件上传至“博客园”的文件中,作为后续自己样式的引用

3、在“博客设置”中的“博客侧边栏公告(支持HTML代码) (支持 JS 代码)”中添加如下代码

<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://blog-static.cnblogs.com/files/it774274680/flat-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/it774274680/waifu1.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://blog-static.cnblogs.com/files/it774274680/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/it774274680/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
原文地址:https://www.cnblogs.com/it774274680/p/14439752.html