给你的博客园添加一个会变身的萌萌哒菇凉

使用对像：

博客园，其它平台未测试，

最终效果：

 

1. 申请JS

需要JS权限才可以运行定制代码，这次的代码不限制博客模板

2. 上传需要的js文件

https://blog-static.cnblogs.com/files/blogs/703010/flat-ui.min.css（看板娘的选项 PS：右面的选项 ，不需要可以不配置）
https://blog-static.cnblogs.com/files/blogs/703010/waifu.css        （看板娘在页面的位置以及大小）
https://blog-static.cnblogs.com/files/blogs/703010/live2d.min.js   （一些点击之后的动作）
https://blog-static.cnblogs.com/files/blogs/703010/waifu-tips.js    （看板娘的语言设置）
上传后最终结果：

3. 在侧边栏添加代码

 1 <!-- /* 看板娘2 */ -->
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 <title>Live2D</title>
 6 
 7 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/703010/flat-ui.min.css"/> 
 8 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/703010/waifu.css"/>
 9 
10 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
11 </head>
12 <body>
13 <div class="waifu" id="waifu">
14 <div class="waifu-tips" style="opacity: 1;"></div>
15 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
16 <div class="waifu-tool">
17 <span class="fui-home"></span>
18 <span class="fui-chat"></span>
19 <span class="fui-eye"></span>
20 <span class="fui-user"></span>
21 <span class="fui-photo"></span>
22 <span class="fui-info-circle"></span>
23 <span class="fui-cross"></span>
24 </div>
25 </div>
26 <script src="https://blog-static.cnblogs.com/files/blogs/703010/live2d.min.js"></script>
27 <script src="https://blog-static.cnblogs.com/files/blogs/703010/waifu-tips.js"></script>
28 <script type="text/javascript">initModel()</script>
29 </body>
30 </html>

记得修改src和link 4个部分的文件为你的上传文件URL噢

 

然后刷新你的博客页面看看

 

posted @ 2021-09-01 18:41  走戏园  阅读(47)  评论(0)    收藏  举报