前言
不少人的博客上都有一个自我介绍的机器人，我也想给自己的博客弄一个。但是并没有在网上发现教程。经过询问得知该机器人叫做botui。有了项目名字那就好办了。Github找到项目我们就可以直接开工了！
注意区分你的站点有没有使用Pjax，若站点开启Pjax请用第二种方法。
第一种方法（站点没开启Pjax）
下载必要资源
点击按钮进入botui的GitHub页面并在releases页面将项目下载到站点目录中。
解压后我们在项目目录下的build文件夹下可以找到下面的文件。
将这些文件复制到站点根目录下。
引入资源
在自定义输出head 头部的HTML代码下引入这些css和js，vue.js我们就用cdn的。
<link rel="stylesheet" href="botui.min.css">
<link rel="stylesheet" href="botui-theme-default.css">
<script src="botui.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
这里的路径请按照实际的来，vue.js直接可以用上面的地址。
JS代码
我们在自定义 JavaScript中插入这段代码，这段代码是控制机器人输出内容的，大家可以根据botui的使用文档修改内容。也可以参考下面的自行修改。
var botui = new BotUI("botui-app");
botui.message.bot({
delay: 200,
content: "Hi, 陌生人???"
}).then(function() {
return botui.message.bot({
delay: 1000,
content: "这里是 liuli ???"
})
}).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: "???"
}).then(function() {
return botui.message.bot({
delay: 1500,
content: "在瞎折腾的情况下建立了这个站点。"
})
}).then(function() {
return botui.message.bot({
delay: 1500,
content: "略懂HTML/CSS"
})
}).then(function() {
return botui.message.bot({
delay: 1500,
content: "日常兴趣：旅行、爬山、美食"
})
}).then(function() {
return botui.message.bot({
delay: 1500,
content: "喜欢动手，热爱学习新知识，热爱开源文化。"
})
}).then(function() {
return botui.action.button({
delay: 1500,
action: [{
text: "为什么叫 liuli呢？???",
value: "next"
}]
})
}).then(function(res) {
return botui.message.bot({
delay: 1500,
content: "这是我名字的拼音啦，因为懒得想网名就这样直接用了。"
})
}).then(function(res) {
return botui.message.bot({
delay: 1500,
content: "emmmmm，至于域名嘛，是腾讯云出BUG的时候免费获得的，说起来并没有什么含义，因为好记所以就用了！"
})
}).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.message.bot({
delay: 1500,
content: " "
})
});
}页面代码
最后在需要显示机器人的页面插入这段html代码，机器人就会显示在页面上了。
<div class="botui-app-container" id="botui-app">
<bot-ui></bot-ui>
</div>第二种方法（站点开启Pjax）
下载资源
下载我打包好的 botui.zip压缩包上传到站点根目录并解压。这是我们可以看到文件夹内有如下文件。打开botui.html即可修改机器人对话内容。
botui.html内的对话内容照着使用文档或者我写好的改就行，我的图片有防盗链切记更换图片否则会无法显示。
插入Iframe标签
修改完成后机器人可以访问一下 botui.html页面，没有问题的话我们在要使用机器人的页面插入下面的 iframe标签来插入 botui.html即可。
<iframe src="https://yourdomain/botui/botui.html" width="100%" height="1225px" align="absmiddle" frameborder="no"></iframe>
记得将yourdomain改成自己站点的域名，在
botui.min.css文件中我们可以修改机器人对话框的高度，iframe标签中的 height属性能控制 iframe的高度，自己根据展示的内容自行调整即可。
效果
正在与liuli对话:
5 条评论
Pjax的问题要怎么解决呢？
我也想知道。。。。
不好解决，尝试过回调函数，建议单独做一个页面，然后 ifame 嵌入到文章中。
ifame 会有高度适应和跨域问题，不过很好解决。
感谢提供思路，问题已解决。
是iframe吧？行吧，我去研究一下。