最近在捣鼓typecho博客，无意中发现一个好玩的小插件botui，可以实现简单的自定义聊天对话，因此通过"抽丝剥茧“提取出来一个简单的示例代码，就是一些js，css之类的。非常适合移植作为博客插件。
1.Botui介绍
一款自动回复文字、图片、视频的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>