前言
最近在家闲的我,偶然机会看到一个博客个人页面的机器人有点意思。当时我就兴奋极了,向那位博主讨教一番,才知道这是BotUI
BotUI 是一个有趣的聊天 JS 框架、自动回复文字、图片、视频的JS聊天机器人框架BotUI，可以自由设置多种选项、触发关键词、输入框等内容，聊天内容或范围也可以自由设置，回复内容可以是文字、图片（GIF亦可）、视频，界面样式像是一个对话聊天界面，使用者可以创建一个对话内容与访客进行互动。
项目地址
简单粗暴通用代码
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Delivery Bot</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdn.anjl.cn/1/botui.min.css" />
<link rel="stylesheet" href="https://cdn.anjl.cn/1/botui-theme-default.css" />
</head>
<body>
<div class="miao" style="text-align:center; font-size: 42px; margin-bottom: 20px;">[AnJLの窝]</div>
<div class="botui-app-container" id="botui-app" >
<bot-ui style="min-height: 300px;background-color: rgba(242, 242, 242, 0.5);border-radius: 10px;">
<bot-ui>
</div>
<script src="https://cdn.anjl.cn/1/vue.min.js"></script>
<script src="https://cdn.anjl.cn/1/botui.js"></script>
<script src="https://cdn.anjl.cn/1/delivery-bot.js"></script>
</body>
</html>Mirages主题使用方法
1.Ty后台 - Mirages主题设置 - 主题自定义扩展 - 自定义 HTML 元素拓展 - 标签: head 尾部 (head 标签结束前) 填入css链接
<link rel="stylesheet" href="https://cdn.anjl.cn/1/botui.min.css" />
<link rel="stylesheet" href="https://cdn.anjl.cn/1/botui-theme-default.css" />
2.Ty后台 - Mirages主题设置 - 主题自定义扩展 - 自定义 HTML 元素拓展 - 在 body 标签结束前 填入js链接
<script src="https://cdn.anjl.cn/1/vue.min.js"></script>
<script src="https://cdn.anjl.cn/1/botui.js"></script>
<script src="https://cdn.anjl.cn/1/delivery-bot.js"></script>
3.在要应用的页面填入以下代码(文章或者独立页面,如想让代码生效请用!!!要生效的代码!!!)
<div class="miao" style="text-align:center; font-size: 42px; margin-bottom: 20px;">[AnJLの窝]</div>
<div class="botui-app-container" id="botui-app" >
<bot-ui style="min-height: 300px;background-color: rgba(242, 242, 242, 0.5);border-radius: 10px;">
<bot-ui>
</div>注意事项
对话内容需要在delivery-bot.js修改,其他文件可以引用我的(网站一天不倒闭 链接就能用),当然也可以自己上传。
碎语我找了很久,看到的都是WP和hexo的教程。我已经尽可能提高美观和实用度,但是无奈技术原因还是存在bug,但是可以避免的。比如我的页面,心细的可能能发现!
bug就是每出一条消息自动滚到底部,在线等一个大佬能够解决bug!
应该是你的botui.js里面的_container有问题。
帮我检查一下？？https://anjl.cn/1/botui.js
之前写botui.js的侧栏美化时正好遇到了同样的问题。顺便就给改了。
严格来说不算bug，只是定位逻辑不一样。原版本的botui.js是每行新内容从页面顶端开始。我改了定位的逻辑，改成了从页面正中开始，这样阅读体验会好很多。
修改botui.js的内容
root.Vue.directive('botui-scroll', {
inserted: function (el) {
_container.scrollTop = _container.scrollHeight;
el.scrollIntoView(true); //原代码内容
el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"}); //修改成这个
}
});
原来是这么回事啊
因为这个bug，所以你单独创建了一个页面把这个写出来了吗，然后这个bug似乎就不是很明显了
是的呢，目前只能这样@(笑尿)