给博客添加一只萌萌的血小板

2019-04-20 阅读量

在搭建博客之初就有了解过 live2d，也跟着教程尝试给博客添加过 live2d 看板娘，但是使用的是预设的那几个模板，总觉得吧太大众化了，我能用别人也能用，那还不如不用，于是就把之前的看板娘给撤了。

我一般浏览博客的时候，都喜欢点他们的友链，然后看看其他大佬的博客。今天点了一个前端大佬的博客（猫与向日葵），emmm…日系卖萌可爱风格，大佬都喜欢这样的么。

打开主页，虽然这种风格不属于我的菜，因为我一般还是比较正经滴，嘿嘿。正要关掉网页，wait，右下角是啥…一只超级萌的血小板！

糟了，是心动的感觉！太可爱了，比那些大众化的模板好看多了，博主使用的是 Typecho 搭建的博客，所以基于 Hexo 搭建的博客上不会有太多人用这个模型。于是乎，我下定决心要把这只血小板抠出来放到我的博客上。

下载模型文件

博主在他的博客上已经有了相关的教程 – 给博客添加能动的看板娘(Live2D)，但不是基于 Hexo 平台的，要想把模型放到我的博客，对于我这种前端小白来说还是需要折腾一下的。

感谢博主给出了下载模型的链接，首先点击链接，下载血小板的模型文件。

解压后，可以看到它的文件结构是这样婶的：

其中 model.json 包含了模型的一些基本信息，model.moc 包含了图层、参数、坐标系和组件等信息，texture_00.png 是血小板的图像文件，motions 文件夹中的 .mtn 是模型一些动作文件。

目前还不能确定这个模型的通用性，于是我按照之前在 Hexo 博客添加看板娘的教程安装了一个适用于 Hexo 博客的看板娘，是这样婶的：

这个好像叫 shizuku，其实也还好啦，但是已经被滥用了，看到好多博客都用了这个，当然还有一些其他的模型可以参考这篇博客，给出了一些常见的模型预览图。不嫌大众化或者不想折腾的同学可以在那里挑一个自己喜欢的模型装到自己的博客上。

修改模型文件

安装完 shizuku 后，打开我本地的 Hexo 博客文件，打开博客根目录 -> node_modules -> live2d-widget-model-shizuku，这个就是刚才下载的适用于 Hexo 博客的 shizuku 模型了，来分析一下它的文件结构：

除了本身的文件层级有些区别之外，还多了一个 package.json，暂且不知道这是干嘛的，从文件名推测应该是一个文件包描述文件。多了个 shizuku.physics.json，推测应该是模型的物理信息。其他的文件基本上和血小板模型是一致的，嘿嘿，有戏。可以看出这里的 assets 文件夹就是模型文件了。

我的思路是使用安装 shizuku 的方式，去安装血小板模型，首先能想到的就是先把血小板的文件结构梳理成和 shizuku 的一样。梳理之后的结构如下：

安装模型

在 Hexo 博客添加看板娘的教程中，除了可以使用预设的几个模型之外，还给了两种方式去加载自定义的模型，一种是保存到本地，使用本地的模型。另一种是将模型发布到 npm，然后再和使用预设模型一样来安装模型。

加载本地模型，可能和使用 npm 安装模型有一些区别，我尝试后是失败的。于是我决定尝试第二种方法。

新建一个目录, 用你的 Node 环境执行 npm init, 推荐使用 live2d-widget-model-xxx 的包名。
在刚刚创建的目录下创建 assets 子目录, 把模型放进去。
使用 npm publish 来发布。
然后使用 npm install –save live2d-widget-model-xxx 来安装。
通过向 model.use 键入包名 (live2d-widget-model-xxx) 来使用。

执行完 npm init 命令后，需要填写一些关于模型的一些信息，然后文件夹中出现了 package.json 文件，可以看到文件中包含了我们刚才填写的信息：

{
  "name": "live2d-widget-model-platelet",
  "version": "1.1.0",
  "description": "live2d-widget-model-platelet",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "live2d-widget-model-platelet"
  ],
  "author": "huangzishan",
  "license": "ISC"
}

package.json 文件里记录了项目的描述信息，比如项目作者、项目描述、项目依赖哪些包、插件配置信息等等。至此我们的血小板模型已经可以确定是通用的了。

然后我就兴致冲冲地输入 hexo clean 清除缓存，hexo g 生成静态页面，然后 hexo d 发布到仓库中，然后清除浏览器的缓存，输入我的博客网址，所有动作一气呵成。然而结果却是，嗯？我的血小板呢???

可谓是一顿操作猛如虎，定睛一看原地杵。我哭了，你呢？

调整细节

作为卷福和柯南的粉丝，我怎么可能就此放弃，于是我回想所有可能漏掉的细节，等等，有一个 json 文件被我漏了，没错，就是 platelet.model.json 文件。看一下它里面是什么内容：

{
	"type": "Live2D Model Setting",
	"name": "model",
	"model": "model.moc",
	"textures": [
		"model.2048/texture_00.png"
	],
	"motions":{
		"idle":[
			{"file":"motions/Idle.mtn"}
		],
        "sleepy":[
            {"file":"motions/Nemui.mtn"}
        ],
		"flick_head":[
			{"file":"motions/Anone_Synced.mtn"}
		],
		"tap_body":[
			{"file":"motions/Dance.mtn"}
		]
	}
}

可以看到，这里是模型的描述文件，包括模型的模块名称和一些动作组件的相对路径等，但里面的信息还是梳理之前的。哼，我冷笑一声，熟悉的BGM响起，此刻我自己眼中的我是这样的：

然鹅现实中的我却是这样的：

卷福说过，当你排除了所有不可能性，剩下的无论多不可能，都是真相。嘿嘿，真相只有一个，于是我把 platelet.model.json 文件的内容修改了一下：

{
	"type": "Live2D Model Setting",
	"name": "live2d-widget-model-platelet",
	"model": "moc/platelet.moc",
	"textures": [
		"moc/platelet.2048/texture_00.png"
	],
	"motions":{
		"idle":[
			{"file":"mtn/Idle.mtn"}
		],
        "sleepy":[
            {"file":"mtn/Nemui.mtn"}
        ],
		"flick_head":[
			{"file":"mtn/Anone_Synced.mtn"}
		],
		"tap_body":[
			{"file":"mtn/Dance.mtn"}
		]
	}
}