为Wordpress添加血小板Live2D
废话不多说，先看效果~~(´ｰ∀ｰ`)
之前在很多个人博客看到过Live2D，超级萌有没有~~
然后网络上有适用于各种博客的Live2D教程，插件一类的。我也找了一下适用于Wordpress的相关文章，但是要么就是模型不够可爱，要么就是可定制的程度较低。
直到发现了猫与向日葵大神还有沙加大神的博客嘻嘻嘻嘻（＞人＜；）
现在记录一下自己的添加血小板Live2D的过程~~~
首先，需要在网站的根目录准备这些文件：
assets/
├── autoload.js
├── flat-ui-icons-regular.eot
├── flat-ui-icons-regular.svg
├── flat-ui-icons-regular.ttf
├── flat-ui-icons-regular.woff
├── live2d.js
├── waifu.css
├── waifu-tips.js
└── waifu-tips.json
以及
live2d
├── model.json
└── setting
├── Anone_Synced.mtn
├── Dance.mtn
├── Idle.mtn
├── model.moc
├── Nemui.mtn
└── texture_00.png
所使用的插件名称为：Live2D demo，源码来源为https://github.com/fghrsh/live2d_demo
该项目中有对各个文件的详细介绍。
再次再次再次膜拜大神~~ q(≧▽≦q)
源码下载下来之后，Wordpress方面需要修改的地方有：
主题文件目录的footer.php文件：
--- footer.php 2019-02-22 15:16:41.000000000 +0800
+++ footer.php 2019-08-29 09:57:48.338823502 +0800
@@ -49,5 +49,28 @@
<?php if(of_get('is_act')){notice_qzhai(of_get('act'),of_get('nstata'),of_get('ntime'));}?>
<a href="#" class="top" data-uk-smooth-scroll style="display:none"><i class="uk-icon-angle-up"></i></a>
<?php do_action('footer_qzhai'); echo of_get('footertext');?>
+
+ <?php if(!wp_is_mobile()){?>
+
+ <div class="waifu">
+ <div class="waifu-tips"></div>
+ <canvas id="live2d" 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="/assets/waifu-tips.js"></script>
+ <script src="/assets/live2d.js"></script>
+
+ <script type="text/javascript">
+ live2d_settings['modelId'] = 1;
+ live2d_settings['modelTexturesId'] = 87;
+ initModel("/assets/waifu-tips.json")
+ </script>
+ <?php } ?>
</body>
</html>以及主题文件目录的header.php文件：
--- header.php 2019-02-22 15:16:42.000000000 +0800
+++ header.php 2019-08-29 09:34:12.813126461 +0800
@@ -14,6 +14,7 @@
<?php } ?>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<?php wp_head(); echo of_get('headtext');?>
+ <link rel="stylesheet" type="text/css" href="/assets/waifu.css"/>
</head>
<body <?php if(of_get('bgimg')){ echo 'style="background-image: url('.of_get('bgimg').');"'; }?> class="uk-height-1-1">之后按照个人主题的色彩格式修改人物头顶的气泡框格式，颜色，阴影等。
修改文件waifu.css：
.waifu-tips {
opacity: 0;
margin: -20px 20px;
padding: 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.62); 文字框线
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5); 文字框背景图
box-shadow: 0 3px 15px 2px rgba(0, 0, 0, 0.2); 文字框阴影
text-overflow: ellipsis;
overflow: hidden;
position: absolute;
animation-delay: 5s;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
}之后最关键的一步，更改插件引入Live2D模型的接口为本地模型文件。
修改文件waifu-tips.js：
function loadModel(modelId, modelTexturesId=0) {
if (live2d_settings.modelStorage) {
localStorage.setItem('modelId', modelId);
localStorage.setItem('modelTexturesId', modelTexturesId);
} else {
sessionStorage.setItem('modelId', modelId);
sessionStorage.setItem('modelTexturesId', modelTexturesId);
} loadlive2d('live2d', '/live2d/model.json', (live2d_settings.showF12Status ? console.log('[Status]','live2d','模型',modelId+'-'+modelTexturesId,'加载完成'):null));
}修改完成之后，保存，刷新。铛铛铛~~可爱的血小板就出现在博客下面啦！！~