參考/轉載處：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
記錄自己學習操作的過程：
看着別人博客主頁的看板娘好萌好貼心，自己也想弄一個啊，怎么辦，不會啊。。。。。。。。。。當、當、當，本菜鳥將親自實踐，弄一個，此處記錄自己的學習實踐過程，也供大家參考。
一、基本工作
1、要自定義博客，首先登錄自己的賬號，在自己博客主頁找到管理，點擊設置
2、點擊設置后，進入到基本設置頁面，看是否有js權限，如果沒有就先申請
⚠️：已經有了js權限，下面的操作才有效
二、添加看板娘操作
1、最最最精簡版：
在博客側邊欄公告處添加如下代碼
代碼：
<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>
最后保存，即可成功
一只可愛的小貓咪就有啦
如果想換其他模版，可以修改 jsonPath 的路徑，可選的模型（從此處整理來：https://www.cnblogs.com/goodmemoryblog/p/14279625.html）有：
//黑貓咪：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。 感謝🙏博主
成品：
1）在基本工作的基礎上（在管理=》設置頁面），找到頁面定制CSS代碼，將代碼添加進去，不禁用模版默認CSS，不然頁面的基礎結構會亂，當然你可以自己去寫/換樣式。
CSS代碼：
*{
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）在博客側邊欄加入，下面代碼
⚠️：將代碼中的
<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個文件下載好，在博客園的文件中上傳，點擊進去，復制上面地址替換相應位置
點擊文件：
選擇文件上傳，成功后便有下面四個文件，點擊上傳后的文件
在跳轉的頁面，拿到自己的鏈接地址，替換相應的地方，四個文件步驟一樣
添加代碼如下：
<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>
當當當，更好看的看板娘添加成功，下面是在Safari瀏覽器上看到的效果
如果需要更改看板娘的聊天內容，可以在waifu-tips.js文件中修改哦，todo。。。
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/eve-d/flat-ui.min.css"/>
先存問題，這個資源的鏈接地址出了的點問題導致，頁面的看板娘沒加載出來
3、高級版todo。。。