网页添加 Live2D 看板娘

参考/转载处：

https://www.fghrsh.net/post/123.html
https://github.com/fghrsh/live2d\_demo
https://www.cnblogs.com/goodmemoryblog/p/14279625.html
https://www.cnblogs.com/yjlaugus/p/8724881.html#/c/subject/p/8724881.html
https://www.cnblogs.com/Lantxy/p/13112000.html

本文转载链接：网页添加 Live2D 看板娘（菜鸟级详细教程） - 妖妖未初 - 博客园 (cnblogs.com)

Live2D开源项目地址：

https://github.com/xiazeyu/live2d-widget-models
https://github.com/GEGEWU-CLOUD/live2d-widget-models

L2Dwidget.min.js 存于:

https://drive.wn-apple-teawine.fun/api/raw/?path=/public-tools/Live2D/通用js/L2Dwidget.min.js

记录自己学习操作的过程：
看着别人博客主页的看板娘好萌好贴心，自己也想弄一个啊，怎么办，不会啊。。。。。。。。。。当、当、当，本菜鸟将亲自实践，弄一个，此处记录自己的学习实践过程，也供大家参考。

一、基本工作

1、要自定义博客，首先登录自己的账号，在自己博客主页找到管理，点击设置

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_e77040f256eadd57f3446ab8d6e60d16.png

2、点击设置后，进入到基本设置页面，看是否有js权限，如果没有就先申请

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_048d8db540e75eec0fd0bbf8e94904b3.png⚠️：已经有了js权限，下面的操作才有效

二、添加看板娘操作

1、最最最精简版：

在博客侧边栏公告处添加如下代码

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_574d813c1585364829bf47ae76ffda46.png

代码：

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
<!-- 网页侧边添加猫咪 -->

  <script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
  <script>
  L2Dwidget.init({
  "model": {
  jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
  "scale": 1
  },
  "display": {
  "position": "right", //模型的表现位置
  "width": 150, //模型的宽度
  "height": 300, //模型的高度
  "hOffset": 0,
  "vOffset": -20
  },
  "mobile": {
  "show": true,
  "scale": 0.5
  },
  "react": {
  "opacityDefault": 0.7, //模型默认透明度
  "opacityOnHover": 0.2
  }
  });
  </script>

<!-- 网页侧边添加猫咪 -->

最后保存，即可成功

一只可爱的小猫咪就有啦

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_5ec4c415016c2d8230473f35c8b9898e.png

如果想换其他模版，可以修改 jsonPath 的路径，可选的模型（从此处整理来：https://www.cnblogs.com/goodmemoryblog/p/14279625.html）有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//黑猫咪：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
//白猫咪：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
//萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
//狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
//萌妹1号：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
//萌妹2号：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
//萌妹3号：https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
//妹子4号：https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json
//妹子5号：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
//6号：https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
//7号：https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
//8号：https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
//9号：https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
//10号：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
//11号：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
//帅哥1号：https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
//帅哥2号：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json

2、添加可以说话的看板娘，操作如下：

参考地址：https://www.cnblogs.com/Lantxy/p/13112000.html。 感谢🙏博主

成品：

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_8bdf0fcd97ff7dbc79a468a55689bbf5.png

1）在基本工作的基础上（在管理=》设置页面），找到页面定制CSS代码，将代码添加进去，不禁用模版默认CSS，不然页面的基础结构会乱，当然你可以自己去写/换样式。

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_dff8d272ae66a655129e0cefc10d7c8a.png

CSS代码：

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
*{
transition: all 0.4s;
}
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
">rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background-image: url("http://ww4.sinaimg.cn/large/637d0877gw1exlma5gj0wj21hc0u04p6.jpg");
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
#navList li{
cursor: pointer;
transition: all 0.2s;
}

#navList li:hover {
transform: scale(1.5) rotate(360deg);
color:#FF0;
opacity:0.5;
}
#blogTitle {
height: 100px; /*高度*/
clear: both;
">rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
">rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}

.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}

.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
">rgba(33, 160, 139, 0.9);
}

#topics{
background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
display: none;
}

#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

2）在博客侧边栏加入，下面代码

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_1870159a9879f476f71cf451334326e8.png

⚠️：将代码中的

1
2
3
4
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/flat-ui.min.css"/>
<script src="https://blog-static.cnblogs.com/files/eve-d/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/eve-d/waifu-tips.js"></script>

换成自己的链接地址，步骤如下

i、参考下面地址下载需要上传的文件

⚠️：https://www.cnblogs.com/Lantxy/p/13112000.html，借用博主的下载地址，感谢🙏

ii、将4个文件下载好，在博客园的文件中上传，点击进去，复制上面地址替换相应位置

点击文件：

选择文件上传，成功后便有下面四个文件，点击上传后的文件

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_99426f652dfc59f2251960920fe4fa99.png

在跳转的页面，拿到自己的链接地址，替换相应的地方，四个文件步骤一样

https://github.com/zznn-cloud/zznn-cloud-blog-images/raw/main/Qexo/24/5/image_1fc3cac4eea4ea295052a0b2c54d42fa.png

添加代码如下：

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
29
30
31
32
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.2 / Demo</title>
 
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/flat-ui.min.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!--<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2>-->
<div id="touxiangdiv" align="center"><img id="touxiang" src="https://pic.cnblogs.com/avatar/2063441/20200611132410.png" /></div>
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-chat"></span>
<span class="fui-user"></span>
<span class="fui-cross"></span>
</div>
</div>
 
<script src="https://blog-static.cnblogs.com/files/eve-d/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/eve-d/waifu-tips.js"></script>
<script type="text/javascript">initModel("assets/")</script>
<style>
#touxiang{
width:auto;
}
</style>
</body>
</html>
1
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/flat-ui.min.css"/>

先存问题，这个资源的链接地址出了的点问题导致，页面的看板娘没加载出来

3、高级版todo。。。