使用BotUI搭建js机器人

前言

最近在家闲的我,偶然机会看到一个博客个人页面的机器人有点意思。当时我就兴奋极了,向那位博主讨教一番,才知道这是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!

文件下载

效果预览完整文件对话文件