[yotroy.cool]给博客配置botui添加对话交互框架-以halo博客为例

rTwTroy

已于 2023-03-19 14:44:46 修改

阅读量864

点赞数

分类专栏： git 博客交互文章标签： javascript js 交互设计 github html5

于 2021-03-29 04:05:12 首次发布

本文链接：https://blog.csdn.net/Troy_Zhang1112/article/details/115291764

版权

git 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

博客

1 篇文章 0 订阅

订阅专栏

交互

1 篇文章 0 订阅

订阅专栏

个人博客https://www.yotroy.cool/，欢迎关注我哦～

============================================================

Botui

GitHub - botui/botui: 🤖 A JavaScript framework to create conversational UIs

配置

参考官方Github文档，现提供halo博客的解决方案，演示效果及其代码放在文末。

配置`<head>`

【后台-系统-其他设置-自定义内容页head】

<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https:/unpkg.com/botui/build/botui-theme-default.css" />

配置内容页

在内容页键入如下即可应用

<div class="botui-app-container" id="example"><!-- id要对应 -->
  <bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.0.5/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script src="/themes/LIlGG_Sakura/source/example.js"><!-- 交互js文件位置 -->//
</script>

其中交互js文件位置请自行修改

交互js文档

接下来就是配置js交互文件了，这个还是得有一定coding基础。参考以下：
官方文档https://docs.botui.org/
Github例子https://github.com/botui/botui-examples

bug

在点击按钮等情况下会出现翻页情况

效果浏览

example1

//example1
var botui = new BotUI('example1');//name要与id对应

botui.message.add({
  content: 'Hello World from bot!'
});

botui.message.add({
  human: true,
  content: 'Hello World from human!'
});

example2

//info
var botui = new BotUI('info');

botui.message.add({
    content: '！'
});

botui.message
    .bot({
        delay: 1000,
        content: 'Hi, 你好呀!'
    }).then(function () {
        return botui.action.button({
            delay: 1000,
            action: [{
                text: 'Hi',
                value: 'hi'
        },{
                text: '......',
                value: 'no_reply'
        }]
    })
}).then(function (res) {
    if(res.value == 'hi') {
        showReminderInput();
    } else {
        botui.message.bot('屁颠屁颠逃走了');
    }
});

var showReminderInput = function () {
    botui.message
        .bot({
            delay: 500,
            content: '我叫Lil Troy，你叫什么呀？'
        }).then(function () {
            return botui.action.text({
                delay: 3000,
                action:{
                    placeholder:'键入你的名字'
                }
            })
        }).then(function (user_name){
            botui.message
                .bot({
                    delay: 500,
                    content: '你好呀，' + user_name.value +'。感谢你来看我！'
                });
        })
}

============================================================

未经作者授权，禁止转载；如需转载，请标明出处。

rTwTroy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[yotroy.cool]给博客配置botui添加对话交互框架-以halo博客为例

个人博客https://www.yotroy.cool/，欢迎关注我哦～BotuiGitHub - botui/botui: ???? A JavaScript framework to create conversational UIs配置参考官方Github文档，现提供halo博客的解决方案，演示效果及其代码放在文末。配置<head>【后台-系统-其他设置-自定义内容页head】<link rel="stylesheet" href="https://unpkg.com/
复制链接

扫一扫