Skip to content

SaraKale/live2d-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

live2d-widget

live2D看板娘,基于 live2d-widget 修改,专为自己博客使用,如果您有需要,也可以下载使用。

适应 hexo-theme-butterfly 主题,添加了B站图标,修改自定义内容。

使用

<head> 中加入下面代码,因为需要Font Awesome v6支持,请确保相关样式表已在页面中加载,否则无法正常显示,如果网页中已经加载了 Font Awesome,就不要重复加载了。

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">

然后将这一行代码加入 <head><body>,即可展现出效果:

<script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>

一般在主题的"layout/_layout.swig"中修改,我是使用了hexo-theme-butterfly这个主题,所以要在 butterfly/_config.yml 文件的Inject处添加,注意空格缩进:

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">
  bottom:
    - <script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>

最后在博客根目录下打开_config.yml添加下面:

live2d:
  enable: true

修改

  • waifu-tips.js 是live2d主要文件,如果对javescript不熟悉建议不要贸然修改。
  • waifu-tips.json 是显示的对话文字,可以修改为自己想要设定的内容。
  • waifu.css 是看板娘的样式表,如要修改样式可在这里修改。

适应 hexo-theme-butterfly,如果是其他主题,可能需要自行相应修改。

waifu-tips.js 第17行到27行之间可以修改图标样式名,我这里删除了原来的fa-paper-plane,因为不需要这类所以改成了B站,也可以自行增添。 在59行修改为你的B站地址:

document.querySelector("#waifu-tool .fa-bilibili").addEventListener("click", () => {
  open("改成你的B站地址");
});

第166行可以修改模型ID,ID的数字具体打开浏览器按F12看控制台输出的报告,或者可以看模型预览

// 首次访问加载指定模型和指定材质
modelId = 1; // 模型 ID
modelTexturesId = 0; // 材质 ID

waifu-tips.json 是触发的对话文字内容,可以修改自己设定的文字和你主题的样式图标,每对话中间要有逗号(英文状态下)隔开。

waifu.css 是看板娘的样式表,如果自己有CSS基础,可以自行修改,我这里新增了butterfly主题夜间模式适应。

自定义CDN

也可以自己自定义内容,上传到自己的服务器,可以把当前仓库克隆下载,然后进行修改。

克隆仓库

git clone https://github.com/SaraKale/live2d-widget.git

然后别忘了在 autoload.js 修改live2d_path地址

const live2d_path = "https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/";

username 替换为你的 GitHub 用户名即可。

也别忘了在<head><body>加载autoload.js文件

<script src="https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"></script>

模型预览

我的博客可以查看效果。

1-0

2-0

3-0

4-0

5-0

6-0

7-0

参考资料

更多内容可以参考:
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
https://github.com/xiazeyu/live2d-widget.js
https://github.com/summerscar/live2dDemo

还可以自行搭建后端 API,并增加模型(需要修改的内容比较多,此处不再赘述):
https://github.com/fghrsh/live2d_api
https://github.com/xiazeyu/live2d-widget-models
https://github.com/xiaoski/live2d_models_collection