参考：
Hexo添加Live2D看板娘最新教程
live2d-widget
live2d-widget-models

网页/博客Hexo添加live2d游戏角色看板娘,简易添加，碧蓝航线等live2d新型游戏角色模型（moc3）
live2d-moc3
jsdelivr

方法1

可以直接去看参考文章的第一部分的第一篇。操作很简单就不说了。

方法2

很可惜方法1似乎对于cubism4.0以上的版本不成立，因为它不支持moc3格式的文件。所以我们这时候就需要采用方法2.

步骤：

1. 在cubism editor中导出模型文件

注意这些选项的设置。

1. fork该仓库

https://github.com/xiunianjun/AzurLaneL2DViewer

1. clone你fork的仓库到本地，然后在asset文件夹中建立一个文件夹，将你的模型文件拖进去，并组织成如下目录结构

【新建文件夹】

【注意文件夹名字与模型名字要一致。把moc3、model3.json、physics3.json放在这里，有没有cdi3无所谓】

【在motion文件夹中放置动作json】

【在textures文件夹中放置贴图】

注意，如果这一步不行的话，那就随便选个assets文件夹下的文件夹，然后点进去把其texture、moc3以及phsycs.json换成自己的，但是文件名不变

1. 再把这些pull到你第二步中fork的仓库里

1. 将其发布为一个release版本。我命名该版本为aaa

1. 修改博客主题根目录下的`_layout.swig`文件【blog\themes\next\layout\_layout.swig】

将这段代码

    <meta charset="UTF-8"><title>live2d-demo</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- Live2DCubismCore --><script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/frame/live2dcubismcore.min.js"></script><!-- Include Pixi. --><script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js"></script><!-- Include Cubism Components. --><script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/live2dcubismframework.js"></script><script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/live2dcubismpixi.js"></script><!-- User's Script --><script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/l2d.js"></script><script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/main.js"></script><style></style>

插入到`_layout.swig`的head标签中

1. 修改博客主题根目录下的`index.swig`文件【blog\themes\next\layout\index.swig】

将这段代码

{% block live2d %}<div class="Canvas"  id="L2dCanvas"></div>
<script>var config = {width: 800,height: 600,left: '850px',bottom: '-100px',basePath: 'https://cdn.jsdelivr.net/gh/xiunianjun/AzurLaneL2DViewer@aaa/assets/',//role: 'Tiger',role: 'aierdeliqi_4',// background: 'https://cdn.jsdelivr.net/gh/xiunianjun/AzurLaneL2DViewer@gh-page/assets/bg/bg_church_jp.png',opacity: 1,mobile: false}var v = new Viewer(config);
</script>
{% endblock %}

插入到`index.swig`文件末尾。

注意修改basepath为`https://cdn.jsdelivr.net/gh/你的github名字/AzurLaneL2DViewer@你在5中的release版本命名/assets/`，role修改为3里面建立的文件夹名【同模型名】

1. 修改博客主题根目录下的`_layout.swig`文件【blog\themes\next\layout\_layout.swig】

在body标签的尾部添加这句：

{% block live2d %}{% endblock %}

1. 然后执行hexo g, hexo d就好啦。

哪里写的不清楚或者有更好的方法，可以随时评论区/私信我交流。