Hexo添加Live2D二次元老婆
本文主要内容：
Hexo博客在网页添加live2d。
添加主要有2种方式：
（1）使用hexo插件；使用该种方式添加，需要选择某一样模型，仅显示live2d，无提示语、无一言、今日诗词等附加功能。
（2）手动添加; 使用该种方式添加，显示live2d，可以切换模型、皮肤，有提示语、一言、今日诗词等附加功能。
（3）将手动添加并入matery主题插件化。
特别说明：
如果你既想安装Hexo的Live2d插件，又想手动引入的方式添加，为了防止造成不可预知冲突，我不建议这么做。如果一定要尝试，也可以摸索一下，我没有试过2个live2d同时显示，有兴趣可以试试，毕竟这样你就可以有两个老婆了~
本文主要围绕以上三点介绍。感谢Tokisaki Galaxy提示补充优缺点介绍。
如果你要进行操作，三选一就行，不要从头到尾一顿操作。非要这样也行，有两个老婆加载超级慢咯~
一、使用Hexo插件
1、安装插件
npm install --save hexo-helper-live2d2、添加配置
hexo的配置文件_config.yml中添加如下配置:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true如果要看更细节的配置，原插件在这里hexo-helper-live2d
3、安装模型
安装之后选择喜欢的模型：
use npm install --save live2d-widget-model-hibiki可选模型：
需要注意的是live2d-widget-model-haru下面有两个，要小心。
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16如果你不想挨个试，可以查看模型预览：
二、手动安装
手动安装是比较通用办法，无所谓是hexo或者其他的架构。
1、下载模型等文件
如果你下载不了，这里提供百度云链接下载
提取码：ot85
2、添加到网站目录
将assets文件夹解压你网站目录。
如路径为：D:\hexo\public\live2d\assets\
3、页面引入
页面引入方式有三种，任选其一即可。
（1）普通方式引入
在 "</head>" 前引入 waifu.css 样式表
在 "</body>" 前引入 waifu-tips.js 和 live2d.js
在 "</body>" 前插入 初始化 JS，可在 初始化前 设置参数如：
<html>
<head>
· · · · · ·
<link rel="stylesheet" type="text/css" href="https://www.domain.com/live2d/assets/waifu.css"/>
</head>
<body>
· · · · · ·
<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="https://www.domain.com/live2d/assets/waifu-tips.js"></script>
<script src="https://www.domain.com/live2d/assets/live2d.js"></script>
<script type="text/javascript">
live2d_settings['modelId'] = 1;
live2d_settings['modelTexturesId'] = 87;
var waifuTips = "https://www.domain.com/live2d/assets/waifu-tips.json";
initModel(waifuTips);
</script>
</body>
</html>（2）autoload.js 引入
可以在页面最下底或foot元素里引入autoload.js即可。
（3）直接嵌入到页面
代码较多，下载后有三个引入示例，可以参考引入示例。
3、定制个性化
修改 waifu-tips.js 顶部的设置参数(或初始化前设置)，均有注释，看注释即可理解意思，不行就改过然后运行看效果。
修改 waifu-tips.json，定制live2d的提示语，可以自己修改成个性化提示语。
在页面切换模型之后如果有喜欢的就F12，看看分组id和模型id
live2d_settings[‘modelId’] = 1;
live2d_settings[‘modelTexturesId’] = 87;
还有一个参数使用需要注意：
live2d_settings[‘waifuDraggable’] =’disable’；
拖拽样式，可选 ‘disable’ (禁用)，’axis-x’ (只能水平拖拽)，’unlimited’ (自由拖拽)，如果想要自由拖拽，需要引入jquery-ui脚步，jquery-ui.js或压缩版jquery-ui.min.js
三、Matery下手动插件化
前提：手动安装方式中下载了源码，将代码放到主题目录下。如放置到：/source/js/live2d_assets/,下面的引入，以此路径为例。
说是Matery主题，其实其他主题原理一样。为了将手动方式插件化，也设置一个启动开关。
1、增加live2d配置
在主题目录的_config.yml 中增加：
live2d:
enable: truetrue表示启用二次元老婆，false表示不启用二次元老婆。
2、头部引入CSS文件
因为CSS文件一般在头部引入，在layout/_partial目录找到head.ejs,添加live2d的样式文章waifu.css,因为有了开关，可以根据开关是否引入waifu.css文件，代码如下：
(ejs代码块不能显示，所以改用html代码块，不影响复制)
<% if (theme.live2d && theme.live2d.enable) { %>
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/js/live2d_assets/waifu.css') %>">
<% } %>3、增加模块文件
在layout/_partial目录新建live2d.ejs,内容如下：
(ejs代码块不能显示，所以改用html代码块，不影响复制)
<!-- waifu-tips.js 依赖 JQuery 库 头部已经引用了JQuery，此处不引入-->
<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="<%- theme.jsDelivr.url %><%- url_for('/js/jquery-ui.min.js') %>"></script>
<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="<%- theme.jsDelivr.url %><%- url_for('/js/live2d_assets/waifu-tips.js') %>"></script>
<script src="<%- theme.jsDelivr.url %><%- url_for('/js/live2d_assets/live2d.js') %>"></script>
<script type="text/javascript">
live2d_settings['modelId'] = 1;
live2d_settings['modelTexturesId'] = 87;
var waifuTips = "<%- theme.jsDelivr.url %><%- url_for('/js/live2d_assets/waifu-tips.json') %>";
initModel(waifuTips)
</script>4、引入模块使用
在你想展示二次元老婆的页面的末尾增加以下代码：
<% if (theme.live2d.enable) { %> <%- partial('_partial/live2d') %> <% } %>如：
在首页展示二次元老婆就找的主题下的layout/index.ejs文件，在index.ejs末尾加上上述代码片段即可。
如果要在其他页面也展示，比如标签也，就找到layout/tag.ejs文件，在tag.ejs末尾加上上述代码片段，其他你想展示的页面同样的操作。
4、重新编译启动
hexo clean & hexo g & hexo s看看有没有效果吧！
5、live2d加载调整
因为引入手动添加的版本附加功能比较多，博客部署之后可能会存在卡顿问题。
解决办法：
（1）第一步，调整附加功能，把不必要的或者不喜欢的暂时关闭。
我最开的时候，有人反映的博客特别卡，滑动时还存在卡顿，因为鼠标的滑动触发了live2d的事件，调用了后台API，所以我就调整了一下，情况有所好转，如果你也想这样，可以参考我的配置，或者自己看waifu.js文件的参数说明自己调试优化.
我修改之后waifu.js文件的参数配置如下：
// 工具栏设置
live2d_settings['showToolMenu'] = true; // 显示 工具栏 ，可选 true(真), false(假)
live2d_settings['canCloseLive2d'] = true; // 显示 关闭看板娘 按钮，可选 true(真), false(假)
live2d_settings['canSwitchModel'] = true; // 显示 模型切换 按钮，可选 true(真), false(假)
live2d_settings['canSwitchTextures'] = true; // 显示 材质切换 按钮，可选 true(真), false(假)
live2d_settings['canSwitchHitokoto'] = false; // 显示 一言切换 按钮，可选 true(真), false(假)
live2d_settings['canTakeScreenshot'] = true; // 显示 看板娘截图 按钮，可选 true(真), false(假)
live2d_settings['canTurnToHomePage'] = true; // 显示 返回首页 按钮，可选 true(真), false(假)
live2d_settings['canTurnToAboutPage'] = false; // 显示 跳转关于页 按钮，可选 true(真), false(假)
// 模型切换模式
live2d_settings['modelStorage'] = true; // 记录 ID (刷新后恢复)，可选 true(真), false(假)
live2d_settings['modelRandMode'] = 'switch'; // 模型切换，可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'switch'; // 材质切换，可选 'rand'(随机), 'switch'(顺序)
// 提示消息选项
live2d_settings['showHitokoto'] = false; // 显示一言
live2d_settings['showF12Status'] = false; // 显示加载状态
live2d_settings['showF12Message'] = false; // 显示看板娘消息
live2d_settings['showF12OpenMsg'] = true; // 显示控制台打开提示
live2d_settings['showCopyMessage'] = true; // 显示 复制内容 提示
live2d_settings['showWelcomeMessage'] = true; // 显示进入面页欢迎词
//看板娘样式设置
live2d_settings['waifuSize'] = '280x250'; // 看板娘大小，例如 '280x250', '600x535'
live2d_settings['waifuTipsSize'] = '250x70'; // 提示框大小，例如 '250x70', '570x150'
live2d_settings['waifuFontSize'] = '12px'; // 提示框字体，例如 '12px', '30px'
live2d_settings['waifuToolFont'] = '14px'; // 工具栏字体，例如 '14px', '36px'
live2d_settings['waifuToolLine'] = '20px'; // 工具栏行高，例如 '20px', '36px'
live2d_settings['waifuToolTop'] = '0px' // 工具栏顶部边距，例如 '0px', '-60px'
live2d_settings['waifuMinWidth'] = '768px'; // 面页小于 指定宽度 隐藏看板娘，例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide'] = 'left:0'; // 看板娘贴边方向，例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable'] = 'unlimited'; // 拖拽样式，例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = false; // 松开鼠标还原拖拽位置，可选 true(真), false(假)
如果只是是加载也卡顿，就来继续第二步。
（2）第二步，添加博客加载动画 。
需要说明，加载动画只是为了延迟进入页面 ，如果是鼠标滑动带来的卡顿，还是老老实实改第一步的参数吧，不不必要功能能关就关点吧。
在你的工作空间，也有称之为站点根目录的位置，新建一个scripts文件夹，下面放入loading-pages.js,文件内容如下：
/* global hexo */
"use strict";
hexo.extend.filter.register('after_render:html', function (htmlContent) {
const injectHead =
`<style type="text/css" lang="css">
#loading-container{
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
width: 100vw;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFF;
text-align: center;
/* loader页面消失采用渐隐的方式*/
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.loading-image{
width: 120px;
height: 50px;
transform: translate(-50%);
}
.loading-image div:nth-child(2) {
-webkit-animation: pacman-balls 1s linear 0s infinite;
animation: pacman-balls 1s linear 0s infinite
}
.loading-image div:nth-child(3) {
-webkit-animation: pacman-balls 1s linear .33s infinite;
animation: pacman-balls 1s linear .33s infinite
}
.loading-image div:nth-child(4) {
-webkit-animation: pacman-balls 1s linear .66s infinite;
animation: pacman-balls 1s linear .66s infinite
}
.loading-image div:nth-child(5) {
-webkit-animation: pacman-balls 1s linear .99s infinite;
animation: pacman-balls 1s linear .99s infinite
}
.loading-image div:first-of-type {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up .5s 0s infinite;
animation: rotate_pacman_half_up .5s 0s infinite;
}
.loading-image div:nth-child(2) {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down .5s 0s infinite;
animation: rotate_pacman_half_down .5s 0s infinite;
margin-top: -50px;
}
@-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
@keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
.loading-image div:nth-child(3),
.loading-image div:nth-child(4),
.loading-image div:nth-child(5),
.loading-image div:nth-child(6){
background-color: #49b1f5;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
transform: translateY(-6.25px);
top: 25px;
left: 100px;
}
.loading-text{
margin-bottom: 20vh;
text-align: center;
color: #2c3e50;
font-size: 2rem;
box-sizing: border-box;
padding: 0 10px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 500px) {
.loading-text{
font-size: 1.5rem;
}
}
.fadeout {
opacity: 0;
filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
</style>
<script>
(function () {
const loaded = function(){
setTimeout(function(){
const loader = document.getElementById("loading-container");
loader.className="fadeout" ;//使用渐隐的方法淡出loading page
document.getElementById("body-wrap").style.display="flex";
setTimeout(function(){
loader.style.display="none";
},2000);
},2000);//强制显示loading page 1s
};
loaded();
})()
</script>`;
const injectBody = `
<div id="loading-container">
<p class="loading-text">玩命加载中 . . . </p>
<div class="loading-image">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>`;
if (/<\/head>/gi.test(htmlContent)) {
let lastIndex = htmlContent.lastIndexOf('</head>');
htmlContent = htmlContent.substring(0, lastIndex) + injectHead + htmlContent.substring(lastIndex, htmlContent.length);
}
if (/<body>/gi.test(htmlContent)) {
let index = htmlContent.indexOf('<body>');
htmlContent = htmlContent.substring(0, index) + injectBody + htmlContent.substring(index, htmlContent.length);
}
return htmlContent;
}, 1);
关于页面加载动画，我是参考过客～励む《Matery 主题添加 loading-pages》一文。
(3)重新编译启动测试一下
hexo clean & hexo g & hexo s参考文章：
《在Hexo博客上添加可爱的Live 2D模型》
《给网页添加一个Live2D看板娘（前端）》
《Matery 主题添加 loading-pages》
相关文章
- Hexo搭建静态博客（一）——基础搭建
- Hexo搭建静态博客（二）——创建页面
- Hexo搭建静态博客（三）——主题更换
- Hexo搭建静态博客（四）——插件安装
- Hexo搭建静态博客（五）——踩坑问题
- Hexo搭建静态博客（六）——项目部署
- Hexo搭建静态博客（七）——客服与推送
- Hexo添加Live2D二次元老婆
- Hexo博客Valine-Admin踩坑记录
- Hexo博客Matery主题valine升级与优化
- Hexo博客Matery主题新手常见问题
- Hexo博客Matery主题添加多级分类
- Hexo博客添加思维导图渲染
- Hexo博客Matery主题添加说说Artitalk教程
- 静态博客-字体更换教程
