【进阶】NexT8.8手动配置Live2d看板娘

发表于 更新于 阅读次数：

前言

由于大佬stevenjoezhang/live2d-widget的看板娘项目是魔改版，虽然优点是开箱即用（不需要过多配置，也不需要在后端部署模型API），但是缺点是这个项目仅供展示之用，并不包含任何模型，所以自由度比较低，为了能更自由的做自定义修改，我研究了大佬fghrsh/live2d_demo和fghrsh/live2d_api的两个Git仓库，自己动手丰衣足食

后端部署

在MacOS上部署

  • 在Mac上部署测试环境

传送门

前端配置

  • 下载fghrsh/live2d_demo项目，将/assets/目录放到博客的blog/source/目录下

  • 为了方便后期维护，重命名目录为live2d

  • 编辑waifu-tips.js文件，修改自建API部分的配置

/live2d_api-1.0.1/：填写自己部署的后端模型API访问地址，访问到API项目根目录即可

hexo/source/live2d/waifu-tips.js
1
live2d_settings['modelAPI'] = '/live2d_api-1.0.1/';

更多配置

  • 直接修改一些默认值
hexo/source/live2d/waifu-tips.js
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
// 后端接口
live2d_settings['modelAPI']             = '/live2d_api-1.0.1/';   // 自建 API 修改这里
live2d_settings['tipsMessage']          = 'waifu-tips.json';            // 同目录下可省略路径
live2d_settings['hitokotoAPI']          = 'lwl12.com';                  // 一言 API，可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)

// 默认模型
live2d_settings['modelId']              = 1;            // 默认模型 ID，可在 F12 控制台找到
live2d_settings['modelTexturesId']      = 53;           // 默认材质 ID，可在 F12 控制台找到

// 工具栏设置
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']    = true;         // 显示 一言切换    按钮，可选 true(真), false(假)
live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮，可选 true(真), false(假)
live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮，可选 true(真), false(假)
live2d_settings['canTurnToAboutPage']   = true;         // 显示 跳转关于页  按钮，可选 true(真), false(假)

// 模型切换模式
live2d_settings['modelStorage']         = true;         // 记录 ID (刷新后恢复)，可选 true(真), false(假)
live2d_settings['modelRandMode']        = 'switch';     // 模型切换，可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换，可选 'rand'(随机), 'switch'(顺序)

// 提示消息选项
live2d_settings['showHitokoto']         = true;         // 显示一言
live2d_settings['showF12Status']        = true;         // 显示加载状态
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']       = 'disable';    // 拖拽样式，例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置，可选 true(真), false(假)

// 其他杂项设置
live2d_settings['l2dVersion']           = '1.4.2';        // 当前版本
live2d_settings['l2dVerDate']           = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl']          = 'auto';       // 主页地址，可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl']         = 'https://www.fghrsh.net/post/123.html';   // 关于页地址, '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名，例如 'live2d.png'

博客配置

解除自定义组建的注释

  • 在主题配置中解除一个自定义页面的配置
hexo/_config.next.yml
1
2
custom_file_path:
  header: source/_data/header.njk

在组建中载入看板娘

  • 如果前端配置的路径不是blog/source/live2d/，那么需要手动修改以下6处CSS和JS的引入路径
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
<!-- 手动加载看板娘 -->
<link rel="stylesheet" type="text/css" href="/live2d/waifu.min.css?v=1.4.2"/>

<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="/live2d/jquery.min.js?v=3.3.1"></script>

<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="/live2d/jquery-ui.min.js?v=1.12.1"></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="/live2d/waifu-tips.min.js?v=1.4.2"></script>
<script src="/live2d/live2d.min.js?v=1.0.5"></script>
<script type="text/javascript">
  /* 可直接修改部分参数 */

  /* 这里我省略自定义配置，直接在waifu-tips.js中修改默认值 */

  /* 在 initModel 前添加 */
  initModel("/live2d/waifu-tips.json?v=1.4.2")
</script>

完成

参考文献

FGHRSH的博客
Live2D看板娘v1.4——Demo 1