介绍:
BotUI是一个有趣的聊天 JS 框架,界面样式像是一个对话聊天界面,使用者可以创建一个对话内容与访客进行互动,可自定义程度高,使用难度也不高。下面我就针对 WordPress博客进行部署演示,其他博客部署也是一样的。
Origin:https://github.com/botui/botui
![图片[1]-给你的博客添加聊天机器人-倦意博客](https://jyblog.cn/wp-content/uploads/2023/07/QQ截图20230713223514.jpg)
优化:
众所周知,既然我分享了,那就肯定是和别人发出来不一样的。
增加:
- 消息提示音(类似于老版本IPhone弹出消息的声音,当然这个声音可以自定义)
- 将JS引用库的一些东西本地化,如Vue和fontAwesome.js等等
部署:
1.在文章界面插入代码:
<meta charset="UTF-8">
<title>关于我?</title>
<link href="Bot/css/botui-theme.css" rel="stylesheet">
<link href="Bot/css/botui.min.css" rel="stylesheet">
<div id="content" class="site-content">
<audio id="sound" preload="auto">
<source src="Bot/sound.mp3" type="audio/mpeg">
</audio>
<div class="entry-content">
<div class="popcontainer" id="juanyi-bot" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px; 2px solid">
<center>
<h6>新认识の好友</h6>
<h4>与 倦意 对话中...</h4>
</center>
<bot-ui>
<center>
<div style=" background-image: url(Bot/loading.svg);background-repeat: no-repeat;background-size: 10em;background-position: center;height: 10em;"></div>
<p>Loading</p>
</center>
</bot-ui>
</div>
</div>
</div>
<script src="Bot/js/vue.min.js"></script>
<script src="Bot/js/bot.js"></script>
<script src="Bot/js/juanyi.js"></script>
2.将文件内容解压并放到你的博客根目录下
3.编辑Bot/js/juanyi.js 文件
var botui = new BotUI('juanyi-bot'), //juanyi-bot对应HTML中的div id
address = 'ijuanyi.com'; //改成自己的网站地址即可
botui.message.bot({
delay: 200, //延迟200ms显示消息, 1s = 1000ms
loading: true, //在加载的时候就显示
content: "Hi,小伙伴👋👋👋" //内容
}).then(function() {
return botui.message.bot({
delay: 1000,
loading: true,
content: "这里是倦意!"
})
}).then(function() {
return botui.message.bot({
delay: 1400,
loading: true,
content: "一个会爱好码代码的医生!"
})
})
4.其他:
- Bot/loading.svg 对应加载图片
- Bot/sound.mp3 对应消息提示音
© 版权声明
THE END
- 最新
- 最热
只看作者嘿嘿 {{dalao}}
(=・ω・=)
SMPT...下次一定 {{tiaokan}}
抄吧抄吧 {{miantian}}
我这个是优化版本 {{haixiu}}
我这个是优化版本 {{xieyanxiao}}
抄吧~ {{dianzan}}