用Live2D让看板喵入住你的Hexo博客吧\(^o^)/~

how-to-play-with-live2d-on-hexo

这个神奇的看板生物是我在某一次自由地 surfing the internet 时碰巧发现的,当时看到了之后就瞬间萌化了(〃’▽’〃)
当天晚上就马上为自己的博客加上了左下角这只~顺便还配好了CDN~
那么现在,就让我们一起学猫叫,一起喵喵喵喵喵!在你面前撒个娇~哎呦喵喵喵喵喵ヽ(^ω^)ノ


概述

首先要告诉大家的是,Hexo 配置这只 Live2D 非常简单,需要的时间也不长~
然后,本文中配置 Live2D 看板娘所使用的环境如下:

* Windows 10 1803
* node-v8.11.2-x64
* git version 2.17.1.windows.2
* hexo-v3.7.1
* NexT.Muse v6.4.1
* hexo-helper-live2d@3.1.0
* 看板娘一只

同时给出 hexo-helper-live2d 的 Github 链接:https://github.com/EYHN/hexo-helper-live2d
另外,本文在电脑上浏览最佳!
接下来!让我们开始吧!


安装并配置 hexo-helper-live2d

在这一章节完成后,就可以完成对 Live2D 的配置啦!请耐心看完,很快就搞定咯!

安装 hexo-helper-live2d

首先,在博客的根目录下执行下方命令,并可以得到类似下方的输出:

$ npm install hexo-helper-live2d --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-helper-live2d@3.1.0
added 6 packages from 6 contributors and audited 5818 packages in 22.674s
found 0 vulnerabilities

非常简单,看到类似上方的输出之后,代表这个插件已经安装完成啦!

配置 hexo-helper-live2d

这部分是这篇文章的重点部分,完成这部分之后即可在自己的博客上看到你家的萌物啦!
在开始配置之前,你需要先获取 Live2D 的资源,很多手游中都有 Live2D 资源可以获取的哦!具体获取方式此处不表,有需要的同学可以 Google 一哈٩(๑>₃<)۶
当然啦!为了让大家能够快速配置好看板喵,自然是有其它方式的~
你可以在 插件作者的博客 里挑选一只你喜欢的萌物,然后记录下它的名字~
然后我们开始配置吧( ̄▽ ̄)/

安装你看中的萌物

上方页面中提供的 Live2D 资源已经都被作者发布成 npm 包啦!
我们只需要简单滴安装 live2d-widget-model-你选中的萌物名字 即可获得对应的 Live2D 资源,我们这里以 hijiki 这只黑喵为例~
使用以下命令安装 live2d-widget-model-hijiki

$ npm install live2d-widget-model-hijiki --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ live2d-widget-model-hijiki@1.0.5
added 1 package and audited 5819 packages in 9.782s
found 0 vulnerabilities

如果你输入的命令得到了类似上方的输出,那么,hijiki 已经在等着你了哦!

配置你看中的萌物

官方文档中可以很容易获取配置文件的样例,下方提供的配置可以让大家直接使用 hijiki (〃’▽’〃)
首先,请大家打开博客根目录下的配置文件 _config.yml,在配置文件的最后添加以下内容:

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true
scriptFrom: jsdelivr # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
    use: live2d-widget-model-hijiki # npm-module package name
    # use: hijiki # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/hijiki # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定义 url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
display:
    superSample: 2
    width: 125
    height: 125
    position: left
    hOffset: 30
    vOffset: -20
mobile:
    show: false
    scale: 0.05
react:
    opacityDefault: 1
    opacityOnHover: 0.2

然后执行命令 hexo clean && hexo g && hexo s,即可在本地4000端口看到这只萌物啦!效果图如下:

hijiki-rendering.png

是不是超级简单!!!

配置详解

为了让大家能够更加自由地自定义自己看板喵的位置、大小、属性等内容,我在下方表格中列出了上方配置中所有项目的解释,并不是用到了所有配置。
请注意!!!这里使用的 hexo-helper-live2d 版本是 3.1.0,如果你使用的不是这个版本,下方内容可能已经过期。
这里给出作者的 API 文档,此文档应该是作者根据版本更新的:live2d-widget.js API

配置项类型属性备注
enableBooleantrue或者false控制live2d插件是否生效。
scriptFromStringlocal或者jsdelivr或者unpkgl2dwidget.js使用的CDN地址,local表示使用本地地址。
pluginRootPathString例如:live2dw/插件在站点上根目录的相对路径。
pluginJsPathString例如:lib/脚本文件相对与插件根目录路径。
pluginModelPathString例如:assets/模型文件相对与插件根目录路径。
tagModeBooleantrue或者false标签模式, 控制是否仅替换tag标签而非插入到所有页面中。
debugBooleantrue或者false调试模式, 控制是否在控制台输出日志。
model.useString例如:live2d-widget-model-hijikinpm 模块包名(上文例中即使用的这个方式)。
model.useString例如:hijiki博客根目录/live2d_models/ 下的目录名。
model.useString例如:./wives/hijiki相对于博客根目录的路径。
model.useString例如:https://域名/model.json你自定义live2d模型json文件的url。
model.scaleNumber可选值,默认值为 1模型与canvas的缩放。
model.hHeadPosNumber可选值,默认值为 0.5模型头部横坐标。
model.vHeadPosNumber可选值,默认值为 0.618模型头部横坐标。
display.superSampleNumber可选值,默认值为 2超采样等级。
display.widthNumber可选值,默认值为 150canvas的长度。
display.heightString可选值,默认值为 300canvas的高度。
display.positionNumber可选值,默认值为 right显示位置:左或右。
display.hOffsetNumber可选值,默认值为 0canvas水平偏移。
display.vOffsetNumber可选值,默认值为 -20canvas水平偏移。
mobile.showBoolean可选值,默认值为 true控制是否在移动设备上显示。
mobile.scaleNumber可选值,默认值为 0.5移动设备上的缩放。
react.opacityDefaultNumber可选值,默认值为 0.7默认透明度。
react.opacityOnHoverNumber可选值,默认值为 0.2鼠标移上透明度(此项貌似没有效果)。

总结

好啦!今天的配置就到这里,大家有没有都把自己的看板喵领回家呀!٩(๑>◡<๑)۶
这种新奇的小玩意儿以后可能还是会有的,但是为了保证自己一如既往喜欢的简约,可能以后就不会有更多花哨的东西出现了。
好啦希望大家喜欢(:з」∠)
另外,顺便告诉大家,我左下角这只的模型解包来自 药水制作师 手机游戏,版权归该官方所有。

坚持原创!欢迎各位客官给我打赏买小饼干吖!✿✿ヽ(°▽°)ノ✿
0%