Docker系列 WordPress系列 动态对话页面
转自我的个人博客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区块，填入以下内容：
<!--https://cdn.bootcss.com/botui/0.3.9/botui.min.css-->
<link href="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/chatbox/botui.min.css" rel="stylesheet">
<link href="https://blognas.hwb0307.com/checkbot/botui-theme-bensz.css" rel="stylesheet">
<!-- 因为vue和botui更新导至bug,现将对话移至js下的botui中配置 -->
<div class="entry-content">
<!-- 可以试试 background-color: transparent 喔！ -->
<div id="kelecnbot" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
<bot-ui></bot-ui>
</div>
<!--iframe src="https://kelecn.top/donate/simple/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe-->
</div>
<script src="https://blognas.hwb0307.com/checkbot/botui_bensz.js"></script>
<script>bot_ui_ini()</script>
请注意！！第3行：
<link href="https://blognas.hwb0307.com/checkbot/botui-theme-bensz.css" rel="stylesheet">
和第11行：
<script src="https://blognas.hwb0307.com/checkbot/botui_bensz.js"></script>
的botui-theme-bensz.css和botui_bensz.js换成自己文件的地址。另外，botui.min.css也是可以下载的，不过我就懒得搞了。有兴趣的话从https://cdn.bootcss.com/botui/0.3.9/botui.min.css下载到自己本地吧！
值得注意的是，我注释了一小段代码：
<!--iframe src="https://kelecn.top/donate/simple/" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe-->
它与一个开源的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
Docker系列 WordPress系列 动态对话页面相关推荐
- Docker系列 WordPress系列 国服最强博客看板娘没有之一
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言 在<Docker系列 WordPress系列 特效>教程中,你应该已经学会怎么使用一个CDN看板娘 ...
- Docker系列 WordPress系列 个人博客的广告展示
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言 某些网站访问的时候,网页里会有很多广告.有些广告多的,阅读体验很差,非常恼人.在电脑端浏览网页时,我们一般会安 ...
- Docker系列 WordPress系列 你需要个人博客吗
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言 有些小伙伴对个人博客有所了解后,可能会觉得自己是不是也可以搞一个个人博客,分享一些东西啥的.你可以从以下几个方 ...
- docker 安装wordpress
2019独角兽企业重金招聘Python工程师标准>>> 1.安装mysql服务 由于用到mysql数据库服务,我们先下载mysql镜像: docker pull mysql 创建目录 ...
- 自然语言处理NLP星空智能对话机器人系列：业界动态信息分享 京东零售数据智能探索实践沙龙
自然语言处理NLP星空智能对话机器人系列:业界动态信息分享 京东零售数据智能探索实践沙龙 目录 京东客服全链路数智化的应用实践 京东智能商客之推荐卖点的技术介绍 星空智能对话机器人系列博客 京东客服全 ...
- Docker重学系列之高级网络篇
Docker重学系列之高级网络篇 高级网络配置 说明 veth-pair技术 网络小结 Docker 网络相关的命令列表 容器访问控制 容器访问外部网络 容器之间访问 访问所有端口 访问指定端口 映射 ...
- 【Youtobe trydjango】Django2.2教程和React实战系列十【动态路由、app内部路由】
[Youtobe trydjango]Django2.2教程和React实战系列十[动态路由.app内部路由] 1. 动态路由示例 1.1 动态路由 1.2 处理DoesNotExist不存在 2. ...
- C#表达式目录树系列之5 –动态创建查询表达式
概要 在项目开发中,根据用户的需求,一般来是,我们的查询表达式是固定的,新的查询需求都要通过代码的修改来实现.而对于不确定的查询条件,固定查询表达式的方式显然是行不通的. 针对固定查询表达式存在的问题 ...
- 视频教程-Docker企业实战系列-Docker/K8S
Docker企业实战系列 京东商城运维架构师,京峰Linux云计算教学总监,担任国内多家知名社区运维专家网站Linux版主,专注Linux自动化运维,熟练LVS.Nginx,前端架构及Python开发 ...
最新文章
- 新闻网大数据实时分析可视化系统项目——5、Hadoop2.X HA架构与部署
- 程序员的自我修养--链接、装载与库笔记：静态链接
- HDU1862 EXCEL排序【排序】
- 如何手动卸载 SQL Server 2005 实例（官方）
- Windows上安装Mysql解压缩版教程
- leetcode 岛屿的个数
- 用Keil-MDK开发TQ2440裸机程序入门教程——LED流水灯实现
- Ganglia 权威指南-安装Ganglia过程
- 运动目标跟踪（十九）--TLD
- flash 调试版本
- JAVA笔试面试题集锦05
- gulp打包Replace Autoprefixer browsers option to Browserslist config. Use browserslis
- 在亚马逊能接到服装订单吗？亚马逊美国站突然没订单怎么办？
- 【Python自动化制作PPT材料（模仿人工操作）】
- 结束拒绝访问的进程 cmd下结束进程 强行结束进程 1
- SQL prompt 怎么重新加载数据库（清除缓存）
- tcpdf 打印PDF字体乱码，通过视图解决方法
- 乐山计算机学校小姐,这个学校，来了一批远方的兄弟姐妹 ——四川乐山市计算机学校金口河籍学生来访交流...
- YOLOv3反向传播原理 之 全流程源码分析
- 基于OTDR相干检测的分布式振动传感器
热门文章