2019-07-24

Hexo博客默认主题的修改与美化10

文章目录

1. 给HEXO博客添加 Live2d小人

给HEXO博客添加 Live2d小人

Live2D是一种应用于电子游戏的绘图渲染技术，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。添加Live2D人物模型到网页中使得页面更加生动有趣，本文将详述如何将Live2d小人添加到Hexo博客中。

安装live2d模块

在博客已搭建好之后，使用PowerShell进入博客目录。使用命令

1	npm install --save hexo-helper-live2d

安装hexo-helper-live2d模块,以便使用。

添加配置文件

在根目录下的_config.yml添加配置，内容如下：

live2d:
 enable: true # 是否启动
 scriptFrom: local # 默认
 pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
 pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
 pluginModelPath: assets/ # 模型文件相对与插件根目录路径
 tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
 debug: false # 调试, 是否在控制台输出日志
 model:
 use: live2d-widget ## 模型文件
 display:
 position: right # 定位方向 left right top bottom
 width: 150 # 小人宽度
 height: 300 # 小人高度
 hOffset: -15 # 向 偏移
 vOffset: -15 # 像 偏移
 mobile:
 show: true # 手机端是否显示
 react:
 opacity: 0.7 # 模型透明度

选择模型

可选择的模型如下表：
| 模型图片| 命令 |

chitose live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
haru/01 live2d-widget-model-haru/01
haruto live2d-widget-model-haruto
hibiki live2d-widget-model-hibiki
hijiki live2d-widget-model-hijiki
izumi live2d-widget-model-izumi
koharu live2d-widget-model-koharu
miku live2d-widget-model-miku
ni-j live2d-widget-model-ni-j
nico live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
nito live2d-widget-model-nito
shizuku live2d-widget-model-shizuku
tororo live2d-widget-model-tororo
tsumiki live2d-widget-model-tsumiki