live2D看板娘

live2D

hexo

发布日期: 2024-01-26

更新日期: 2026-06-08

文章字数: 1.2k

阅读时长: 5 分

阅读次数:

基础设置

1.模型插件

在hexo根目录进入git bash，输入以下命令安装模型插件

1	# npm install --save hexo-helper-live2d

卸载模型

1	# npm uninstall --save hexo-helper-live2d

2.挑选模型

live2d模型仓库直达

部分模型展示

↓ 各个模型库使用 npm install {packagename}`安装模型

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

我用的是 npm install live2d-widget-model-hibiki

html实现多张图片同行

<table>
    <tr>
        <td><center><img src="https://cdn.jsdelivr.net/gh/Lo-Y-eH/image@main/image/202401272109891.png">图1</center>
        </td>
        <td><center><img src="https://cdn.jsdelivr.net/gh/Lo-Y-eH/image@main/image/202401272122120.png">图2 </center>
        </td>
    </tr>
</table>

原文链接：https://blog.csdn.net/qq_33826564/article/details/81303230

3.详细配置

1.提前在根目录下创建 live2d_models 目录

2.下载好的模型库会在根目录node_modules文件夹中，在该文件夹中搜索模型库名称live2d-widget-model-hibiki将里面的内容复制到提前创建好的目录下live2d_models

3.开始配置根目录下的_config.yml 文件在底部添加如下操作

# 看板娘
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-hibiki
    # 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
  display:
    position: right
    width: 145
    height: 315
    hOffset: 60 # 水平偏移 
    vOffset: 5 # 垂直偏移
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放       
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

model: use: live2d-widget-model-hibikiuse # 这里填你喜欢的模型

更强大的看板娘

支持换装，模型切换，对话框，拍照，小游戏，眼神跟随，触摸对话，音频等。

可以自建api，自定义各种模型，各种对话等。

1.先卸载helper-live2d

1	npm uninstall hexo-helper-live2d

2.下载大神的配置

3.解压配置

解压到\themes\主题\source目录并改名为live2d-widget

4.修改路径

修改autoload.js文件，将大神路径改为相对路径

1
2
3

// 注意：live2d_path 参数应使用绝对路径
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

5.修改代码

修改\themes\主题\layout\_partial下的head.ejs，next主题在/themes/next/layout/_layout.swing目录下

<!--看板娘-->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="/live2d-widget/autoload.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

6.启用配置

在_config.yml全局配置文末添加

1
2
3

#自定义看板娘动画
live2d: 
enable: true

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js、waifu-tips.json、waifu.css文件。

7.查看并部署

1	hexo cl && hexo g && hexo s && hexo d

这条命令会首先清除缓存 (hexo clean), 然后生成静态网页 (hexo g), 接着启动本地服务器预览 (hexo s)，最后部署到远程仓库 (hexo d)。请注意，在部署完成后，由于hexo s仍在运行，本地预览将会继续提供服务，直到你手动停止它(Ctrl C)