如何在博客里添加蕾姆

作者: 幼猫酱 分类: IT 发布时间: 2020-03-22 18:42

注意:本文章仅分享本博客具体实施案例。通用方法、代码复制请点击下方链接。

https://www.wikimoe.com/?post=120

方法来自《博客通用版Live2d蕾姆》作者:广树 。

在具体实施过程中,根据不同的网站,会有少许不一样的地方。下面以我的博客为例。

我的博客基于WordPress,主题使用JieStyle-Two。所以我绝大部分工作都只需要在主题文件夹对应的header.php代码中修改即可。

  • 首先在对应的 head 标签合适的位置位置,插入代码以引入样式。路径填入你下载的live2d文件夹中css文件对应的路径,例如 /live2d/css/live2d.css 。不同的博客填写路径的方法不一样,本博客基于PHP,这里使用了PHP函数获取路径。如图所示:
  • 然后在需要页面的 body 标签内找到合适的位置插入 Live2D 看板娘的元素,按照 Html 书写规范写 。注意,如果您想添加音乐,要在“音乐地址”中填入音乐的路径。我这里也使用了PHP函数获取路径。我之前使用了码率较高的音乐,发现服务器小水管使得音乐需要20秒以上的加载时间,无法忍受。后来经过研究,64kbps的AAC即可提供较好的音质,并且使得音乐文件体积大大下降,大幅度减少了加载音乐所需时长。
  • 在需要页面的 body 标签结束前插入另一些代码。原代码中第一行引入jquery.min.js,我所使用的模板早已在 head 中引入。因此这里注释掉,不重复引入。按网站实际情况填写live2d.js和message.js的路径,我这里使用PHP函数获取路径。

到这里为止主要工作就完成了,在你想要的位置会显示出蕾姆的live2d小人。下面介绍我遇到的一些坑和修改完善的方法。

遇到的最大的坑是,原程序使用了“一言”的接口使得蕾姆变成话痨。但是这个接口较旧,SSL证书过期了,导致博客网址被浏览器显示“不安全”。这里对live2d/js/message.js进行修改,搜索定位把所有 sslapi.hitokoto.cn 修改成 v1.hitokoto.cn ,这样就修复了问题。可惜这个话痨功能在我的博客中出现了一点冲突,使得蕾姆变成了超级话痨,不断飙出句子,我已经禁用了这个功能(注释大法):

如何设置鼠标移动到某些地方,蕾姆就说出指定的语句呢?作者给我们提供了message.json来实现这个功能。 参照原来的代码,修改”selector”后面的标签名并且填上你自己喜欢的语句即可。

  • 如果网站不是自己写的,可能对标签名不是很熟悉。这时候可以使用浏览器的开发人员工具。对着相应元素右键—检查。鼠标掠过代码,浏览器会高亮标出相应的位置,然后对应class=后面的就是标签名了。
  • 我这里以 class=”post-title” 为例,记住标签名为 post-title ,去 message.json 里对应位置修改或者按格式自己敲一组代码,在 “selector”: 后面填上 “.post-title” 。最后在”text”: [ ] 里填上相应的句子(我使用了{text}获取鼠标掠过的文字)。
  • 作者还在message.json里准备了一组鼠标点击蕾姆时触发的语句,可以自行修改并且参照格式添加更多语句。

持续更新中!接下来会更新添加对话功能,请收藏本站获取最新资讯!

点击数:12

发表评论