最近在捣鼓typecho博客，无意中发现一个好玩的小插件botui，可以实现简单的自定义聊天对话，因此通过"抽丝剥茧“提取出来一个简单的示例代码，就是一些js，css之类的。非常适合移植作为博客插件。
1.Botui介绍
官方文档：https://docs.botui.org/
一款自动回复文字、图片、视频的JS聊天机器人框架BotUI，可以自由设置多种选项、触发关键词、输入框等内容，聊天内容或范围也可以自由设置，回复内容可以是文字、图片（GIF亦可）、视频。弄成一个博客插件简直是不要太爽。
Botui是vue.js结合Botui.js使用的，官方文档也是针对脚手架项目如何引入以及使用进行的说明。
2.示例效果
这里是想抽丝剥茧出来，移植到博客里面的，脚手架什么的肯定不考虑，最好整理出来的示例就是一些html，js，css的才是lz所期望的。所以，老规矩，先看效果，后上源码。还是一如既往的单页。方便拿来即用。
展示效果：
源码：botui.html
<html><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="Examples of conversational UIs built using BotUI."><head><title>BotUI</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui-theme-default.css" /></head><body><div class="central central-600"><div class="botui-app-container" id="botui-app"><bot-ui></bot-ui></div></div></body><script src="https://cdn.jsdelivr.net/vue/2.0.5/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/botui/build/botui.js"></script><script>var botui = new BotUI("botui-app");botui.message.bot({delay: 200,content: "Hi, 欢迎你的来访"}).then(function () {return botui.message.bot({delay: 1000,content: "花有重开日 人无再少年"})}).then(function () {return botui.message.bot({delay: 1000,content: "记录生活 留住感动"})}).then(function () {return botui.action.button({delay: 1500,action: [{text: "听我介绍",value: "and"},{text: "结束介绍",value: "gg"}]})}).then(function (res) {if (res.value == "and") {other()}if (res.value == "gg") {return botui.message.bot({delay: 1500,content: "  "})}});var other = function () {botui.message.bot({delay: 1500,content: "你好，这里是流情 Liuqing"}).then(function () {return botui.message.bot({delay: 1500,content: "26岁，技术宅，喜欢捣鼓各种稀奇古怪的东西"})}).then(function () {return botui.message.bot({delay: 1500,content: "对有趣的世界和可能有趣的你感到好奇"})}).then(function () {return botui.message.bot({delay: 1500,content: "在学习过程中遇到了许多问题 也是只能自己探索解决 ..."})}).then(function () {return botui.message.bot({delay: 1500,content: "喜欢探索知识，热爱IT和国风文化，从事互联网产品/Web开发相关工作"})}).then(function () {return botui.message.bot({delay: 1500,content: "希望能与你在比特之海的繁星之下相见！"})}).then(function () {return botui.action.button({delay: 1500,action: [{text: "为什么叫 流情？",value: "next"}]})}).then(function (res) {return botui.message.bot({delay: 1500,content: "似水流，过无情——流情"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "嗨，请叫我流情，或者流情无水也行"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "记住是流情无水，不是流水无情"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "当然跟这个没有关系哈哈"})}).then(function () {return botui.action.button({delay: 1500,action: [{text: "涉及的所有技术栈",value: "next"}]})}).then(function (res) {return botui.message.bot({delay: 1500,content: "主攻Vue全家桶"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "作为前端，会一点点php很合理吧"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "作为前端，会一点点Linux服务器也很合理吧"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "作为前端，会一点PS也是情理之中吧哈哈"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "欢迎您的来访 IP已记录"})}).then(function (res) {return botui.message.bot({delay: 1500,content: "本次会话结束..."})}).then(function () {return botui.message.bot({delay: 1500,content: "..."})});}</script><style>.central{background: url(botuibg.jpg) no-repeat center top;border-radius: 3rem;background-size: cover;overflow: hidden;box-shadow: 0 8px 12px #ababab87;border: 2px solid rgba(208, 206, 206, 0.4) !important;}.central-600 .botui-app-container {width: 100%;background: #35353563;}.central-600 .botui-container {border-radius: 3rem;background: transparent;}.central-600 .botui-actions-buttons-button {border-radius: 8px;background: #919191;font-family: 'Noto Serif SC', serif !important;font-weight: 400 !important;}.central-600 .botui-message-content {padding: 10px 16px;color: #999999;background-color: #ffffff;}.central-600 .botui-message-content.human {color: #fff;background-color: #919292;}.central-600 .botui-container {/* padding: 1rem; */box-sizing: border-box;}.central .botui-container{border-radius: 3rem;}</style>
</html>
![[001-02-001].第2节：java开发环境搭建](https://i-blog.csdnimg.cn/blog_migrate/ed04a8ae5c3cfe161e69b986c024486e.png)
![[数据结构]无头单向非循环链表的实现与应用](https://i-blog.csdnimg.cn/direct/c2776ff4002f4a0090143ac1d78348a5.png)
