Docker系列 WordPress系列动态对话页面

最新推荐文章于 2023-01-04 01:22:28 发布

huangwb8

最新推荐文章于 2023-01-04 01:22:28 发布

阅读量411

点赞数 1

分类专栏： wordpress 文章标签： docker 前端容器

本文链接：https://blog.csdn.net/huangwb8/article/details/127649057

版权

wordpress 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

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

前言

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

msedge_R0zL4Hr9xR

就是一个具有动态对话的页面。显然，这个对话是高度自定义的。该对话基于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之动态壁纸》中均有应用。按需安装该插件即可。

新建页面

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

Code_YzrhWCvkWw

然后插入一个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👋"
}).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

huangwb8

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Docker系列 WordPress系列动态对话页面

今天咱们又来整点花活了！应小伙伴sherwin的请求，我抽空搞了一个“动态对话”页面，界面大致如下：就是一个具有动态对话的页面。显然，这个对话是高度自定义的。该对话基于Vue/JS/CSS，所以操作很简单的，这里总结一下教程，希望对后来者有帮助。本教程的方法适用于所有可以使用js/css的博客平台（比如WordPress）。这个“动态对话”还是很酷的，建议都布署一下！
复制链接

扫一扫