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文件夹中放置贴图】

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

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

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

6. 修改博客主题根目录下的`_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标签中

7. 修改博客主题根目录下的`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里面建立的文件夹名【同模型名】

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

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

{% block live2d %}{% endblock %}

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

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