前言：

我一直使用的看板娘是GitHub上的Live2D Widget，平时使用时引入即可。很早之前我改过源码，把默认的模型改成自己相对来讲看得更顺眼的，还有增添一些特定日期的话，然后很长一段时间我都没再改过有关内容了。

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

部署

其实也不需要自己部署，只需要下面两行就可以了

1
2
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

如果你有用过引入过任何版本的 Font Awesome，就不要重复加载了，只需要第一条😂

上面也算是引入示例了

前端部署

如果你能够通过 ssh 访问你的主机，可以把整个仓库从GitHub克隆到服务器上。

1
2
3
cd /path/to/your/webroot
# Clone this repository
git clone https://github.com/stevenjoezhang/live2d-widget.git

cd后面的路径按你自己的具体情况改，仓库地址我上面写的是作者的

如果你的主机无法用 ssh 连接，那也可直接暴力一点把项目文件下载下来放上去嘛🤣

如果你能正常访问相关文件，那么可以改一下autoload.js

如果你用的是宝塔，那么你找到这个文件就可以改

如果不是，你也可以通过以下操作修改

1
vim autoload.js

然后编辑内容

修改 autoload.js 中的常量 live2d_path 为 live2d-widget 这一目录的 URL。比如说，如果你能够通过

1
https://example.com/path/to/live2d-widget/live2d.min.js

访问到 live2d.min.js，那么就把 live2d_path 的值修改为

这是作者项目文档的描述，其实就是根据你自己的路径改

1
https://example.com/path/to/live2d-widget/

路径末尾的 / 一定要加上

修改完成后按esc，再输入:wq，保存退出。

至于添加模型啥的，我不是很有这个需求，所以没有尝试折腾。网上应该也有挺多相关内容（比如博文）,再加上可以将autoload.js 中的cdnPath替换成你自己的

如果不想用服务器，也可以直接在给fork的仓库创建tag，然后可以通过*cdn.jsdelivr.net*的cdn调用（虽然现在jsdelivr严重拉胯了，不过还能用），这一方案的具体操作见后文自定义修改一节。

跨域问题

本来我以为上面那样就可以了，但是发现了有跨域的问题

跨域问题

不过好在找到了解决的方法，当时找到了这一篇博文参考，顺便再具体地了解一下跨域问题（以前有听过但没有详细地了解，这次算是意外地拓展了一下🤣）

解决办法

因为我用的是宝塔，所以就通过宝塔的方法来讲了。

在对应网站的设置中的配置文件找到类似下图的东西。

bqTrX.png

第一条划线中的json是我自己添加的，因为我这边受跨域问题影响的是json文件

第二天划线就是我们主要要添加的内容

1
add_header Access-Control-Allow-Origin '*';

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问。

有哪些情况会造成跨域

这部分参考了什么是跨域请求? - 知乎 (zhihu.com)

  • 域名不同 （域名访问和ip访问也造成跨域）

比如 ： http://www.example.com 和http://117.34.1.1之间

或者http://www.example.com和http://www.case.com之间

比如： http://www.example.com(:80)和http://www.example.com:8080

  • 协议不同

比如： http://www.example.com和https://www.example.com

自定义修改

以下内容也可以在fork到自己的仓库中修改后创建tag

大致如下

bBner.png

然后

bB1GM.png

再然后

bB7IG.png

Release title填类似0.1.0这种类似版本号

然后点那个Publish release之后就可以了

调用的话就以我之前的为例

1
<script defer src="https://cdn.jsdelivr.net/gh/226yzy/live2d-widget/autoload.min.js"></script>

当然这个有一定缓存时间，要等一段时间才有效果（而且现在jsdelivr的速度已经不如从前了）

autoload.js上文已经提到过了，下文不多赘述

目录结构 Files

这里用作者写的，自己改之前还是要了解这些文件是用来干什么的嘛😂

  • waifu-tips.js 包含了按钮和对话框的逻辑；
  • waifu-tips.json 中定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
  • waifu.css 是看板娘的样式表。

这几个就是主要可以修改的文件

修改默认模型

由于默认模型可能因为各种原因，原来默认设定的模型并不适合，那么我们就需要调整默认模型了

注：这里的调整吗，默认模型仅限于原有的模型，添加模型需要对这个项目修改（我没弄过，可以参考这篇博文）

在waifu-tips.js文件下的大概163行可以找到

1
2
3
4
5
if (modelId === null) {
			// 首次访问加载 指定模型 的 指定材质
			modelId = 4; // 模型 ID
			modelTexturesId = 53; // 材质 ID
		}

那个4是我修改的

修改触发后的内容

由于源文件是针对 Hexo 的 NexT 主题的，所以如果你是使用其他主题还是应该自己自定义这些内容

这个主要改waifu-tips.json 和waifu-tips.js

waifu-tips.json这个文件中有mouseover、click、seasons。是鼠标经过、鼠标点击、特定日期的发言

数据是json格式的

比如mouseover中的

1
2
{"selector": "#live2d",
		"text": ["干嘛呢你，快把手拿开～～", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！", "这样的话，只能使用武力了！", "我要生气了哦", "不要动手动脚的！", "真…真的是不知羞耻！", "Hentai！"]}

这个是在鼠标经过看板娘时触发的内容

#live2d这个懂HTML、CSS这些的应该知道是什么意思了，我们可以通过这个来确定触发的位置

同理click中

1
2
3
4
{
		"selector": "#live2d",
		"text": ["是…是不小心碰到了吧…", "萝莉控是什么呀？", "你看到我的小熊了吗？", "再摸的话我可要报警了！⌇●﹏●⌇", "110 吗，这里有个变态一直在摸我(ó﹏ò｡)", "不要摸我了，我会告诉老婆来打你的！", "干嘛动我呀！小心我咬你！", "别摸我，有什么好摸的！"]
	}

这个是点击看板娘的时候触发的内容

seasons中的

1
2
3
4
{
		"date": "01/01",
		"text": "<span>元旦</span>了呢，新的一年又开始了，今年是{year}年～"
	}

这个说明在元旦（1月1日）时触发（所以可以添加自己觉得有意义的日期内容🤣）

修改有关内容时主要格式要正确

waifu-tips.js包含了按钮和对话框的逻辑，可通过中文内容得知某部分的含义，可按需修改文字内容

比如45行左右的

1
messageArray = ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！", "记得把小家加入 Adblock 白名单哦！"];

这个是你离开当前页面又回来后触发的

修改样式（非人物模型）

waifu.css 是看板娘的样式表，这个懂得CSS的基本都会修改，就不过多赘述了😀

最后

暂时就上面这些吧，有一些细节可能还未完善，欢迎补充😆

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github：226YZY (星空下的YZY) (github.com)

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。