看板娘

https://blog.csdn.net/wang_123_zy/article/details/87181892

这个网站是模型对应的图示

具体下面的操作，非常简单

在Hexo博客中添加hexo-helper-live2d看板娘

以下是在Hexo博客中使用hexo-helper-live2d插件添加Live2D看板娘的详细步骤：

1. 安装插件

在Hexo博客根目录下执行：

npm install --save hexo-helper-live2d

2. 安装Live2D模型

选择一个你喜欢的模型安装（以shizuku模型为例）：

npm install --save live2d-widget-model-shizuku

其他可用模型（任选其一）：

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• live2d-widget-model-haru/01 (或02)
• live2d-widget-model-hijiki
• live2d-widget-model-hibiki
• 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

3. 配置Hexo

在Hexo的_config.yml（不是主题的配置）中添加以下配置：

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-shizuku # 替换为你安装的模型名称
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 手机端是否显示
  react:
    opacity: 0.7 # 透明度
    opacityDefault: 0.7 # 默认透明度
    opacityOnHover: 0.8 # 鼠标悬停透明度
  dialog:
    # 启用对话框功能
    enable: false
    # 是否使用点击触发
    hitokoto: false

4. 可选高级配置

你还可以自定义更多行为：

live2d:
  # ...其他基础配置...
  display:
    superSample: 2
    position: right
    width: 150
    height: 300
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  dialog:
    enable: true
    script:
      # 每一次对话都会随机选择一个条目
      - 欢迎来到我的博客
      - 今天的天气不错呢
      - 有什么我可以帮您的吗？

5. 启动Hexo服务

hexo clean && hexo s

常见问题解决

1. 模型不显示：

   • 确保模型包已正确安装
   • 检查use:后的模型名称是否与安装的包名完全一致

2. 模型太大/太小：

   • 修改width和height参数
   • 在移动端可以设置scale: 0.5来缩小

3. 位置调整：

   • 使用hOffset和vOffset来微调位置
   • position可以是left、right或bottom

4. 性能问题：

   • 如果加载慢，考虑使用CDN版本
   • 在移动端可以通过mobile.show: false关闭

完成以上步骤后，你的Hexo博客应该就会有一个可爱的看板娘了！需要任何特定模型的配置细节吗？