hexo添加live2d模型

参考文章：Hexo（sakura）添加live2d看板动画（可对话，换装互动）_hexo-helper-live2d 对话框-CSDN博客

Hexo+live2d | 如何把live2d老婆放进自己的博客_l2d.js moc3文件-CSDN博客

项目概览 - live2d-widget-models - GitCode

Hexo添加Live2D看板娘最新教程_hexo live2d-CSDN博客

【序】将自制live2d放入自制网页中-对目前网上的网页添加live2d的技术做了一个小整理 - 哔哩哔哩 (bilibili.com)

最开始是有位同学来找我想在hexo博客里添加一个live2d模型，研究了一天，本来想着是弄个自定义的模型，最后还是只能弄个网上现有的模型。不过网上的模型也是挺多的，也可以试试搞搞，先上成果图：

普通模型

首先在博客根目录cmd运行:

1
npm uninstall hexo-helper-live2d

上面是检查有无已经安装live2d,下面的才是安装

1
npm install --save hexo-helper-live2d

先来个简单的模型，继续输入：

1
npm install live2d-widget-model-shizuku

然后在根目录配置文件（_config.yml）里添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## Live2D看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    #模板目录，在node_modules里
    use: live2d-widget-model-shizuku  
  display:
    position: right  #左右显示
    width: 300 
    height: 600
  mobile:
    # 在手机端显示
    show: false   
  rect:
    opacity:0.7

然后老方法hexo g + hexo s 可以运行查看下效果

如果你不喜欢这个模型，可以参考这里的模型库：项目概览 - live2d-widget-models - GitCode，安装对应的模型后记得修改_config.yml刚刚配置的use: 后面的东西。

高级模型

接下来是更高级的模型配置，就是我主页面左边的模型，可以看到它可以换人物和衣服等功能，推荐使用这个高级玩意儿哦，当然你喜欢简洁的话就刚刚的吧。

如果不想要一边一个这样的样子就删除：

1
npm uninstall hexo-helper-live2d

下载大神优化版live2d-widget；
其次， 在主目录\themes\shoka\source目录下新建目录live2d-widget；
最后，将下载内容解压到该目录下。

修改autoload.js文件，将大神路径改为绝对路径
说明：这个绝对路径是编译后 根目录 位置在themes/sakura/source

1
2
3
4
// 注意：live2d_path 参数应使用绝对路径
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";
123

修改\MyWeb\themes\sakura\layout\_partial目录下的head.ejs

1
2
3
4
5
<!--自定义看板娘-->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="/live2d-widget/autoload.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

在\MyWeb\_config.yml文末添加

1
2
live2d: ##自定义看板娘动画
  enable: true

记得注释掉普通模型的yml

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
其实看板娘可以侧边隐藏，对样本的修改影响也不大。

MOC3模型

想要添加自定义的模型，但是现在的新模型大多数都是moc3格式的了，不再是moc格式了，如果想要添加moc3模型，可以参考这篇文章:

Hexo+live2d | 如何把live2d老婆放进自己的博客_l2d.js moc3文件-CSDN博客

我自己的方法是直接修改public 的index.html 文件了，就不推荐我这种方法了，想要了解的话可以往下面看看

moc3推荐模型库：nuke777/AzurLaneL2DViewer (github.com)

也可以下载后clone 到自己的本地然后添加自己的模型在assets里。

index.html里添加:

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
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">
</head>


<body>
    <div class="Canvas"  id="L2dCanvas"></div>
</body>


<script>
    var config = {
        width: 800,
        height: 600,
        left: '0px',
        bottom: '0px',
        basePath: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets',
        role: 'bisimai_2',
        // background: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets/bg/bg_church_jp.png',
        opacity: 1,
        mobile: false
    }
    var v = new Viewer(config);
</script>

对应添加就行，比如head的部分就加到head里。