系列文章

提示：转到日常小技巧专栏，观看更多内容！
点我直达–>日常小技巧专栏

前言

给你的网页添加看板娘（以给博客园博客添加看板娘为例）（保姆级图文）
解决了此处出现了不允许使用的标签，移动link的位置即可。（参考别人的方法发现大家都是互相借鉴，都会报错，后来发现只要移动link标签的位置即可）

页脚 HTML 代码不是有效的 HTML！行 50 列 1: 此处出现了不允许使用的标签

1.下载看板娘资源

百度网盘下载提取码：mbyw
CSDN下载

2.上传资源到文件

进入你的博客后台的管理页面

https://i.cnblogs.com/posts

flat-ui.min.css (浮动菜单栏可以不加但是无法可视化设置了)

live2d.js(live2d动作)

waifu.css（在页面的左侧的相关样式设置）

waifu1.css（在页面的左侧的相关样式设置）

waifu-tips.js(看板娘的提示语音)

3.在设置中调用资源

黏贴代码

这里要注意调用资源的url网址

下面代码的各个url换成你自己的url才能使用个性化修改！
你可以通过上述方式获得其他文件的地址
一般来说网址的前缀都是一样的，区别就在于最后的文件名。
上图中我的文件前缀是：

https://blog-static.cnblogs.com/files/blogs/715859

自定义模板复制下方代码，替换字符串“你的博客文件前缀”为你的博客文件前缀即可使用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="你的博客文件前缀/waifu.css"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head>
<body><link rel="stylesheet" type="text/css" href="你的博客文件前缀/waifu.css"><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.js"></script><script src="你的博客文件前缀/waifu-tips.js"></script><script type="text/javascript">initModel()</script><link rel="stylesheet" type="text/css" href="你的博客文件前缀/flat-ui.min.css"/>
</body>
</html>

下面是我自己的代码，不建议大家复制！大家可以参考，不然这样你的设置会跟随我变化······

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/715859/waifu.css"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head>
<body><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/715859/waifu.css"><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/blogs/715859/live2d.js"></script><script src="https://blog-static.cnblogs.com/files/blogs/715859/waifu-tips.js"></script><script type="text/javascript">initModel()</script><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/715859/flat-ui.min.css"/>
</body>
</html>

4.看看效果

注意本地调试测试需要打开vs code的open with live！
否则会不显示图片！

侧边栏菜单有换装、换角色等多种功能！

总结

大家喜欢的话，给个

给你的网页添加看板娘（以给博客园博客添加看板娘为例）（保姆级图文）相关推荐

在线文本替换工具、支持正则表达式（博客园文章里添加Javascript或＜script＞语句）
概况与介绍在博客园发布一篇文章,文章就是<在线文本替换工具 .支持正则表达式>https://www.cnblogs.com/lsllll44/articles/15522697.htm ...
word+正则表达式==快速批量添加图注题注（保姆级图文）
步骤系列文章 1.准备工作 2.插入第一个题注 3.从一个题注到所有题注 4.善后工作总结系列文章提示:转到日常小技巧专栏,观看更多内容! 点我直达–>日常小技巧专栏这个方法是我的室友 ...
博客园主页上添加Live 2D模型
示例: 代码: <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/ ...
博客园添加live2D看板娘和樱花飘落背景
写在前面本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落博客园文章目录写在前面本文使用 ...
css文件插入背景音乐,博客园添加背景音乐,背景效果!
博客园添加背景音乐,背景效果申请博客园js权限申请话术实例尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...
PS网页设计教程X——在PS中设计摩登的博客布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
博客园随笔添加自己的版权信息［转］
这几日,看了一些博客.发现在一些博客的底部添加了一些版权信息,很新颖.如下图: 写信给博客园的客服,问如何做出来的.回复是添加自己的"签名".无语了,只能自己研究了. 在分析了别人 ...
博客园添加Live2d看板娘
最近给自己的博客添加了个动态的小萝莉,给大家分享一下,效果请见我的博客左下角: (当然你也可以在自己的html页面引入下面的js来添加小萝莉) 1.首先最重要的一点你要申请一个博客园账号. 2.其次申 ...
博客园右下角添加看板娘
看板娘看板娘也就是别人博客右下角或者左下角的那个小人, 那如何把它加载到自己的博客园呢? 前提条件必须需要申请开通支持JS代码, 否则以下内容也就不用看了配置侧边栏公告将以下内容复制到: 博 ...

给你的网页添加看板娘（以给博客园博客添加看板娘为例）（保姆级图文）

步骤