前言

不少人的博客上都有一个自我介绍的机器人,我也想给自己的博客弄一个。但是并没有在网上发现教程。经过询问得知该机器人叫做botui。有了项目名字那就好办了。Github找到项目我们就可以直接开工了!

注意区分你的站点有没有使用Pjax,若站点开启Pjax请用第二种方法。

第一种方法(站点没开启Pjax)

下载必要资源

点击按钮进入botui的GitHub页面并在releases页面将项目下载到站点目录中。

解压后我们在项目目录下的build文件夹下可以找到下面的文件。

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: " ![告辞](https://cdn.jsdelivr.net/gh/kelecn/images@master/gaoci%20.jpg) "
})
}
});

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对话:

最后修改:2022 年 01 月 19 日
如果觉得我的文章对你有用,请随意赞赏