Hexo+live2d | 如何把live2d老婆放进自己的博客

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

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

方法1

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

方法2

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

步骤：

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

注意这些选项的设置。

2. fork该仓库

https://github.com/xiunianjun/AzurLaneL2DViewer

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

【新建文件夹】

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

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

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

4. 再把这些pull到你的仓库里

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

6. 在你的博客根目录下的public中，将live2d-moc3中要求的代码插入到`index.html`中

注意，推荐插入在body标签结束前面一点点的位置，避免我们的live2d被渲染在最下层。

    <div class="Canvas"  id="L2dCanvas"></div><script>var config = {width: 800,height: 600,left: '750px',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>

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

7. 然后执行hexo d就好啦。

注意，由于hexo-g会覆盖原来的index.html，故而第6步操作需要在每次generate对index.html进行重新生成后都做一遍，比较麻烦，但我暂时没找到什么好方法。

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