給博客配置botui添加對話交互框架-以halo博客為例

Botui#

GitHub - botui/botui: 🤖 一個用於創建對話式 UI 的 JavaScript 框架

配置#

參考官方 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/source/botui/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 +'。感謝你來看我！'
                });
        })
}