博客园添加看板娘 (2021/11/05更新）

前言

我也算是最近才开始玩博客园，第一眼就发现了这个会动的人物模型。找到了相关文章，参考链接放在最下。

之所以自己还要写一次【因为我发现我的博客园文件地址不是我的博客园名字，而是变成一串数字。写一下免得小白受罪】

1.下载模型相关文件

参看以下链接中的下载地址。

https://www.cnblogs.com/hean/p/11167216.html

2.将文件上传到博客园

如下图位置：

 

 

 

3.写代码

将以下代码 复制到 博客侧边栏公告区域

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<  html xmlns="http://www.w3.org/1999/xhtml">     <  head >         <  meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />         <  title >Live2D           <  link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/自己博客园文件的地址/waifu.css"/>           <  link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/自己博客园文件的地址/flat-ui.min.css"/>         <  script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">           <  body >         <  div class="waifu" id="waifu">             <  div class="waifu-tips" style="opacity: 1;">             <  canvas id="live2d" width="280" height="250" class="live2d">             <  div class="waifu-tool">                 <  span class="fui-home">                 <  span class="fui-chat">                 <  span class="fui-eye">                 <  span class="fui-user">                 <  span class="fui-photo">                 <  span class="fui-info-circle">                 <  span class="fui-cross">                                 <  script src="https://files.cnblogs.com/files/自己博客园文件的地址/live2d.min.js">         <  script src="https://files.cnblogs.com/files/自己博客园文件的地址/waifu-tips.js">         <  script type="text/javascript">initModel()

 

查看自己博客园文件地址的方法：

以我自己的博客园举例，

红框处就是自己文件的路径，将上面代码中【 自己博客园文件的地址】改成【blogs/716280】。

 

 

 

 

保存代码，返回首页刷新就行了。

ps

参考文章链接：

https://www.cnblogs.com/hean/p/11167216.html

https://www.cnblogs.com/maczhen/p/14375300.html

修改了一些我发现的问题。

23.09.19,更新

waifu1.css是看板娘在右边

waifu.css 是看板娘在左边。