侧边栏壁纸
博主头像
MeowRain

  大家好,我是MeowRain,中文可读作喵雨,至于为什么起这个名字,其实是因为英文里的rain和我的名字有谐音字,哈哈😄,再一个就是我比较喜欢猫咪,也养着一只小猫咪(叫小喵,目前是我姐姐代养,自己太忙了顾不上照顾小猫咪)所以就叫MeowRain啦。

  • 累计撰写 168 篇文章
  • 累计创建 48 个标签
  • 累计收到 5 条评论

如何在你的博客内添加看板娘(live 2d)

MeowRain
2020-09-10 / 0 评论 / 0 点赞 / 90 阅读 / 2,500 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2021-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

如何在你的hexo博客内添加看板娘(live 2d)

实际效果:image-20200910231336366

一. 准备材料:github项目地址 模型下载

image-20200910230818584

二. 安装

​ 把可爱的看板娘安在hexo上很简单,只需要一个简单的命令

npm install --save hexo-helper-live2d

三. 配置

配置的话,我们要打开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
# 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

实际设置效果:image-20200910230956164

四. 添加模型

博主推荐使用c种,方便

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

image-20200910230613718

a. live2d_models子目录名称

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

你的模型叫 mymiku.

在博客根目录 (应当有 _config.ymlsourcesthemes ) 新建名为 mymiku 的子文件夹.

将模型复制到 /live2d_models/mymiku/ 中.

现在, 在这里应当有一个 .model.json 文件 (例如 mymiku.model.json)

/live2d_models/mymiku/ 中.

mymiku 输入到位于 _config.ymlmodel.use 中.

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

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

示例: ./wives/wanko

c. npm 模块名

使用现有的

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

你需要先使用 npm install 模型的包名 来安装,

然后将包名输入位于 _config.ymlmodel.use 中.

0

评论区