hexo二次元看板娘初探

Last updated Nov 1, 2021

# hexo二次元看板娘初探

基本配置好hexo后，便迫不及待地想把这萌萌的东西放在自己的博客中，配置使用整理一哈~

# 安装

^93febc

根据其官方文档的描述：

1
npm install --save hexo-helper-live2d

安装后打开博客，就能发现默认的看板娘已经出现在页面中了。

# 配置

整理了一份基本配置，放置在根目录下的_config.yml中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  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-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.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.05A  q`3
  react:
    opacityDefault: 1
    opacityOnHover: 0.2

下面罗列部分配置的含义，hexo-helper-live2d是在live2d-widget.js的基础上封装的，接受live2d-widget.js的配置以及hexo-helper-live2d的特有配置，其他详细配置可访问： live2d-widget.js

配置项	类型	属性	备注
enable	Boolean	`true`或者`false`	控制live2d插件是否生效。
scriptFrom	String	`local`或者`jsdelivr`或者`unpkg`	l2dwidget.js使用的CDN地址，local表示使用本地地址。
pluginRootPath	String	例如：`live2dw/`	插件在站点上根目录的相对路径。
pluginJsPath	String	例如：`lib/`	脚本文件相对与插件根目录路径。
pluginModelPath	String	例如：`assets/`	模型文件相对与插件根目录路径。
tagMode	Boolean	`true`或者`false`	标签模式, 控制是否仅替换tag标签而非插入到所有页面中。
debug	Boolean	`true`或者`false`	调试模式, 控制是否在控制台输出日志。
model.use	String	例如：`live2d-widget-model-hijiki`	npm 模块包名（上文例中即使用的这个方式）。
model.use	String	例如：`hijiki`	博客根目录/live2d_models/ 下的目录名。
model.use	String	例如：`./wives/hijiki`	相对于博客根目录的路径。
model.use	String	例如：`https://域名/model.json`	你自定义live2d模型json文件的url。
model.scale	Number	可选值，默认值为 `1`	模型与canvas的缩放。
model.hHeadPos	Number	可选值，默认值为 `0.5`	模型头部横坐标。
model.vHeadPos	Number	可选值，默认值为 `0.618`	模型头部横坐标。
display.superSample	Number	可选值，默认值为 `2`	超采样等级。
display.width	Number	可选值，默认值为 `150`	canvas的长度。
display.height	String	可选值，默认值为 `300`	canvas的高度。
display.position	Number	可选值，默认值为 `right`	显示位置：左或右。
display.hOffset	Number	可选值，默认值为 `0`	canvas水平偏移。
display.vOffset	Number	可选值，默认值为 `-20`	canvas水平偏移。
mobile.show	Boolean	可选值，默认值为 `true`	控制是否在移动设备上显示。
mobile.scale	Number	可选值，默认值为 `0.5`	移动设备上的缩放。
react.opacityDefault	Number	可选值，默认值为 `0.7`	默认透明度。
react.opacityOnHover	Number	可选值，默认值为 `0.2`	鼠标移上透明度（此项貌似没有效果）。

经过以上配置（很多配置不需要写，默认即可）后，就能更好的展示自己的看板娘啦。

# Model

# 使用提供的

配置完成后，还得选择自己心仪的看板娘，不要说什么成小孩子才。。。官方给我们提供了一些。https://github.com/xiazeyu/live2d-widget-models

# 使用自己的

占坑。。很遗憾我想要的没有官方model，正在自己寻找制作中。。。

# 使用方法：

# a. live2d_models子目录名称

在您博客根目录下创建一个 live2d_models 文件夹.
在此文件夹内新建一个子文件夹.
将你的 Live2D 模型复制到这个子文件夹中.
将子文件夹的名称输入 _config.yml 的 model.use 中.

你的模型叫 mymiku.
在博客根目录 (应当有 _config.yml 、sources 、 themes ) 新建名为 mymiku 的子文件夹.
将模型复制到 /live2d_models/mymiku/ 中.
现在, 在这里应当有一个 .model.json 文件 (例如 mymiku.model.json)
在 /live2d_models/mymiku/ 中.
将 mymiku 输入到位于 _config.yml 的 model.use 中.

# b. 相对于博客根目录的自定义路径

您可直接输入相对于博客根目录的自定义路径到 model.use 中.

示例: ./wives/wanko

jieye の数字花园