@wangjiezhe/hexo-helper-live2d

v3.1.4

Published

8 months ago

Add the Sseexxyyy live2d to your hexo!

Downloads

0High
0Medium
0Low

wangjiezhe

hexo-helper-live2d

阅读本文档的其他语言版本: English, 简体中文.

向你的Hexo里放上一只萌萌哒二次元看板娘!

演示: https://l2dwidget.js.org/dev.html

原作大大的博客: https://huaji8.top/post/live2d-plugin-2.0/

安装

Hexo

安装模块:


npm install --save hexo-helper-live2d

试试 yarn add hexo-helper-live2d, 据说高能的yarn会比垃圾npm少很多麻烦呢。 Yarn

如果您想使用最近的注入模式(将会在每个页面上显示):

请从 layout/layout.ejs 或 layout/_layout.swig 中删掉 </body> 前的 {{ live2d() }} 或 <%- live2d() %>.

如果您想使用旧的标签模式(仅替换 live2d 标签):

请保留{{ live2d() }} 或 <%- live2d() %>, 并将 tagMode 设置为 true.

我们推荐您使用 npm install --save [email protected] 来强制安装最新版本.

请在您想插入的页面的 </body> 前插入 {{ live2d() }}(swig) 或 <%- live2d() %>(ejs). 将 tagMode 设置为 true, 然后插件将只会在拥有live2d标签的页面出现.

其他的, for jekyll, wordpress, etc

参阅 live2d-widget.js 仍在编写中.

配置

请向Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.

示例:

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

详细的设置

设置分为helper特有的和公共的, 你需要把他们合并放到 _config.yml 中.

helper特有

# 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/[email protected]/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/[email protected]/assets/wanko.model.json # 你的自定义 url

General Settings

最近由于正在积极开发, 可能会有所变动. 不过安啦, 不会有太太太大幅度的修改.

参阅 live2d-widget.js API

示例:

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

模型

有许多方法来使用不同的模型:

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

c. npm 模块名

使用现有的

我们有许多现有的模型, 来看看

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16