导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
热门文章
1页面
程序员老黄历&求签
热度
545
2推文
今年的《点兔》愚人节立绘也终于亮相在《请问您要点OIOI》啦! 这次的女仆装纱路酱也太可爱了吧!果断入手立牌! 另外抽奖环节单发就抽中了纱路酱的卡片,久违的好运呢!
热度
258
3博文
探访《蜡笔小新》老家——春日部游记
热度
156
4推文
《天使降临到了我身边》的漫画版也迎来了完结呢。在新宿的丸井百货正在举办完结快闪。
热度
155
5页面
友链
热度
117
6推文
《苍之彼方的四重奏 10th Anniversary Box》预计2025年3月28日发售,售价为含税19800日元(约922人民币)。 其中如果购买了sprite LIMITED EDITION或FILMIC EDITION版的话,还有机会将名字(猜测)登在结尾字幕中! sprite LIMITED EDITION版售价39800日元(约1853人民币),FILMIC EDITION版售价149800日元(约6973人民币)。 感觉如果花1853人民币就能把"维基萌"打在游戏结尾字幕中也似乎不错的样子?🤔 《苍之彼方的四重奏 10th Anniversary Box》专题页面:https://sprite.net/aokana/10thanniversary/box
热度
104
7博文
《泰拉瑞亚》1.4 突然无法拾取/捡取物品怎么办?
热度
91
8页面
活动
热度
78
9博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
78
10博文
Live2d模型合集分享 | FaceRig | 海王星系列 | 初音未来 | 雷姆 | 凉风青叶 | 尼禄 | 薇尔莉特 | 小埋 | 樱花庄 | 玉藻前
热度
78
最新评论
广树管理员
2025-06-30 18:07
@菲兹克斯喵:是的,刚完结
菲兹克斯喵
2025-06-30 17:44
这个居然完结了?两年前看的,感觉挺好看的,没想到也完结了呀.
广树管理员
2025-06-29 14:30
@白水:多谢大佬夸奖
白水
2025-06-29 14:29
ヾ(≧∇≦*)ゝ博客好萌
广树管理员
2025-06-26 20:36
@Jeffer.Z:编辑器,github 下面的
攻略中
ToHeart
暂无评分
SteamToHeart
2025年6月26日 19时 ~ 攻略中
已累计游玩5天
AQUAPLUS推出的“温暖人心的校园恋爱游戏”将以高清全3D形式焕新归来!
爱上火车-Last Run!!-
暂无评分
Steam爱上火车-Last Run!!-
2025年6月24日 19时 ~ 攻略中
已累计游玩1周
游戏设定于架空日本。为了辅助驾驶员行驶,每列火车都配备了专用的铁路人偶。然而,由于新技术“空凝机”以及人工智能的面世,现有的铁路系统几乎已被废弃,铁路人偶和对应列车也被出售。主人公右田双铁所生活的“御一夜市”正在衰退,有人提出让空凝机工厂落户此地以振兴经济。空凝机工厂会带来水污染,而主人公为了阻止其落户而回到御一夜市。
符文工房龙之天地
暂无评分
Steam符文工房龙之天地
2025年6月10日 20时 ~ 攻略中
已累计游玩3周
体验奇幻冒险与日常生活的 RPG《符文工房》系列最新作。 玩家可以在日常生活中种田、钓鱼和复兴村庄,也可以在冒险的过程中邂逅各种各样的角色。打造属于自己的“村庄”,享受全新的冒险与生活吧!
fault - StP - LIGHTKRAVTE
暂无评分
Steamfault - StP - LIGHTKRAVTE
2025年5月29日 20时 ~ 攻略中
已累计游玩1个月3天
全球累计销量超过50万份的“fault”系列最新作!故事的舞台是一个融合了奇幻与科幻的超前世界——卢森海德王国。本作讲述了生活在此地的一个平凡又平庸的究极普通市民——名为果子的少年的故事。
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

博客通用版Live2d伊斯特瓦尔发布

作者:广树时间:2018-01-13 11:28:58分类:JavaScript

基于上篇文章:给博客加上能陪聊的Live2d版伊斯特瓦尔——emlog插件版

Typecho插件版:Typecho插件版之给博客加上能陪聊的Live2d版伊斯特瓦尔

去掉了emlog特制的功能后的版本。

保留了如下功能:
    1.可以基于图灵机器人的聊天功能(需要自己写接口,默认隐藏)。
    2.能够随意移动并记录位置(关闭浏览器后失效)。
    3.能够随意唤醒或者关闭并记录状态。
    4.自动判断浏览器是否为IE或者手机浏览器,如果判断为true则不加载伊斯。
    5.给骚扰伊斯加了限制频率,不能狂骚扰伊斯了。

使用方法:

去 码云 | GitHub 上克隆或下载最新的版本。

然后把解压出来的文件夹改名为:live2d 。

在需要页面的头部文件(header)引入界面样式,在 head 标签内插入如下代码:


<link rel="stylesheet" href="/live2d/css/live2d.css" />


在 需要页面的body 标签内找到合适的位置插入 Live2D 看板娘的元素,按照 Html 书写规范写


<div id="landlord" style="left:5px;bottom:0px;">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="500" height="560" class="live2d"></canvas>
    <div class="live_talk_input_body">
    	<div class="live_talk_input_name_body">
        	<input name="name" type="text" class="live_talk_name white_input" id="AIuserName" autocomplete="off" placeholder="你的名字" />
        </div>
        <div class="live_talk_input_text_body">
        	<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀?"/>
            <button type="button" class="live_talk_send_btn" id="talk_send">发送</button>
        </div>
    </div>
    <input name="live_talk" id="live_talk" value="1" type="hidden" />
    <div class="live_ico_box">
    	<div class="live_ico_item type_info" id="showInfoBtn"></div>
    	<div class="live_ico_item type_talk" id="showTalkBtn"></div>
        <div class="live_ico_item type_quit" id="hideButton"></div>
        <input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
    </div>
</div>
<div id="open_live2d">召唤伊斯特瓦尔</div>


在 需要页面的 body 标签结束前插入如下代码:


<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var message_Path = '/live2d/';//资源目录,如果目录不对请更改
var talkAPI = "";//如果有类似图灵机器人的聊天接口请填写接口路径
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>


鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。


{
	"mouseover": [
		{
			"selector": ".title a",  //此处修改为你页面元素的标签名
			"text": ["要看看 {text} 么?"]  //此处修改为你需要提示的文字
		},
		{
			"selector": "#searchbox",
			"text": ["在找什么东西呢,需要帮忙吗?"]
		}
	],
	"click": [  //此处是 Live2D 看板娘的触摸事件提示
		{
			"selector": "#landlord #live2d",
			"text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"]
		}
	]
}


然后,刷新你的页面,看看效果吧!

注意路径别弄错了噢 ~
PHP 程序推荐使用主题函数获取绝对路径。


效果:

模型说明
本插件仅供学习和交流使用,禁止用于商业用途。 本插件用到的模型为《超次元游戏海王星》系列中的伊斯特瓦尔,动作表情则是取自Live2d官网的demo,故版权归各官方所有。 原项目使用了 GPL v2 开源协议。


补充说明:

因为图灵机器人的APIKey不应该暴露在前端,理论上应该是由后台进行交互的。

如果所使用的后台程序是PHP的话可以参考:https://www.wikimoe.com/?post=74

上文提到的“var talkAPI = "";//如果有类似图灵机器人的聊天接口请填写接口路径”不是图灵的接口,而是自己的接口。


如需转载请注明出处:https://www.wikimoe.com/?post=76


donate.png

1210 x 50(蓝底).png

cloudcone