转自我的个人博客https://blognas.hwb0307.com。欢迎关注！

前言

今天咱们又来整点花活了！应小伙伴sherwin的请求，我抽空搞了一个“动态对话”页面，界面大致如下：

就是一个具有动态对话的页面。显然，这个对话是高度自定义的。该对话基于Vue/JS/CSS，所以操作很简单的，这里总结一下教程，希望对后来者有帮助。本教程的方法适用于所有可以使用js/css的博客平台（比如WordPress）。

这个“动态对话”还是很酷的，建议都布署一下！

准备工作

我已经将必要的文件上传到bloghelper/chatbox里了。从这里下载，文件列表如下：

botui-theme-bensz.css
botui_bensz.js
index.html.txt

其中botui-theme-bensz.css定义了对话样式，botui_bensz.js定义了对话行为。index.html.txt是一段HTML代码，作为WordPress古登堡编辑器HTML区块的输入内容。

下载完后，可以上传到网站某个目录（比如根目录）。确保存在一个url，使得https://url/botui_bensz.js可以被访问。比如，对于我的博客而言，该url为blognas.hwb0307.com/checkbot，即所有人均可通过地址https://blognas.hwb0307.com/checkbot/botui_bensz.js访问该文件。

对于某些WordPress用户而言，插件Add From Server可能是有益的，因为它会为WordPress根目录内所有文件提供一个可被访问的URL。它在我的系列WordPress教程《Docker系列 WordPress系列 国服最强博客看板娘没有之一》、《Docker系列 WordPress系列 自建随机图API之静态壁纸》和《WordPress系列 自建随机图API之动态壁纸》中均有应用。按需安装该插件即可。

新建页面

如下图所示，基于古登堡编辑器新建一个页面：

然后插入一个HTML区块，填入以下内容：

请注意！！第3行：

和第11行：

的botui-theme-bensz.css和botui_bensz.js换成自己文件的地址。另外，botui.min.css也是可以下载的，不过我就懒得搞了。有兴趣的话从https://cdn.bootcss.com/botui/0.3.9/botui.min.css下载到自己本地吧！

值得注意的是，我注释了一小段代码：

它与一个开源的donate工具有关。由于我已经有一个专门的页面来管理捐赠活动，所以就不需要这段代码了，故注释之。感兴趣可以看项目sponsor-page。尽管如此，不建议直接使用这段代码，因为https://kelecn.top/donate/simple/对应的收款码是别人的而不是你的 (～￣▽￣)～

最后，该页面还有一些建议的操作，比如：

• 更改固定链接。我改为了about。
• 允许评论

最后，更新发布即可！这个页面可以放到菜单里。不会放的人可以看我的教程《Docker系列 WordPress系列 WordPress的菜单》。

编辑botui-theme-bensz.css

如果你对我正在使用的样式感兴趣，可以查看：https://blognas.hwb0307.com/checkbot/botui-theme-bensz.css。

这是一个很简短的CSS。我列举一些个人觉得比较重要的项目。其实对于经常玩CSS的人来说，这段代码的设置真的是so easy。

容器背景

默认字体是"Open Sans",sans-serif。该字体应该是通过开头的url(https://fonts.googleapis.com/css?family=Open+Sans)进行定义的。以此类推，可以定义任意google字体或其它字体。在实践中，我直接引用了一个自定义的btfFont字体，它是我之前在额外CSS中定义的。

background-color控制了整个框的颜色。因为我的博客背景本来就蛮好看的，为不了遮掩原本的背景，我使用了透明色，即background-color: transparent;。

.botui-container{/* 字体大小 */font-size:20px;/* botui容器背景色 *//* background-color:rgba(242,242,242,0); */background-color: transparent;/* 字体 */font-family: "btfFont" !important/* font-family:"Open Sans",sans-serif */
}

机器人内容

.botui-message-content{padding:7px 13px;border-radius:15px;/* 字体颜色 */color:#595a5a;/* 机器人内容背景色 */background-color:#ccd5d5
}

点击者内容

.botui-message-content.human{/* 字体颜色 */color:#f7f8f8;/* 点击者内容背景色 */background-color:#919292
}

链接色

我个人建议使用主题色rgba(var(--themecolor-rgbstr))，这样会比较自然。

.botui-message-content-link{color:#919292/* color: rgba(var(--themecolor-rgbstr)); */
}

编辑botui_bensz.js

如果你对我正在使用的js感兴趣，可以查看：https://blognas.hwb0307.com/checkbot/botui_bensz.js。

在botui_bensz.js文件前面是Vue.js和botui.js的相关代码，不需要动。

我们需要编辑的是最下方的对话。其实这段代码的逻辑很清楚的，我觉得已经不需要再多说了。比如，botui.action.button定义了一个问题。botui.message.bot定义了一个回答。content可以使用markdown语法定义链接或图片。

静静地看吧，自己学着调一下：

/** BotUI回复配置*/
var botui = new BotUI("kelecnbot");
botui.message.bot({delay: 200,content: "Hi, there👋"
}).then(function() {return botui.message.bot({delay: 1000,content: "我是Bensz，可以叫我苯苯！"})
}).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://chevereto.hwb0307.com/images/2022/10/16/wallhaven-85x3v2.md.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: "略懂Linux/HTML/CSS/JavaScript/Python，专攻R"})}).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: "为什么叫 Bensz 呢？ 🤔",value: "next"}]})}).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: "最初是在NAS中安装的，所以以blognas开头。历史遗留问题。"})}).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() {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: "欢迎[捐赠鼓励](https://blognas.hwb0307.com/thankyou/) (～￣▽￣)～ "})});
}

最后建议：增加代码块

.then(function(res) {return botui.message.bot({delay: 1500,content: "XXX"})})

的时候，不要复制漏某个符号即可 (～￣▽￣)～

最终效果

前面也贴过，再贴一次：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n9TIl342-1667360892964)(https://chevereto.hwb0307.com/images/2022/11/01/msedge_R0zL4Hr9xR-1.gif)]

小结

知道门路后，布署过程还挺简单的。不过我发现botui_bensz.js有两个bug：

• 如果对话中出现多个链接，仅有最后一个链接会被正确显示。
• 对argon主题来说，对Pjax不兼容。

也有可能是我用的这个脚本比较老了，有机会向开发者咨询一下，目前暂时先这样用着吧！如果安装过程有什么问题，欢迎评论区留言！

参考

• 给博客添加一个聊天机器人—Botui.js