🍥

文章封面来自T5-白咕咕

主要介绍一下如何在Halo中使用Botui做一个简单的对话Bot，类似真白大佬Hexo Sakura主题中AboutMe页面，Halo Sakura主题的移植和制作者将这个页面剔除了，以前也很喜欢这个自我介绍的小页面，现在恢复一下

效果：LKarrieBot

小BUG：Console可以看到有TOC的报错，这个版本的Halo Sakura主题右侧的目录有点小BUG，我的效果页面中也没用到目录，其实无伤大雅（尝试过在元数据里添加toc false，想着禁用就好了…禁用完好家伙BotUi就寄了w

注：看过Git issue和百度到的一些博客，都有在使用BotUI点击对话按钮后，浏览器右侧下拉框自动下滑的BUG（包括官方的案例都有），怀疑是BotUi和Vue的版本使用不当造成的，初次尝试我也遇到了这个问题，后来换了换BotUi、Vue的版本就莫名其妙修好了🤔

添加BotUi Style

登录Halo后台 > 系统 > 博客设置 > 其他设置 > 自定义内容页 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" />

添加BotUi相关JS

建议直接ftp上传到服务器主题source目录

文件内容可以在效果页LKarrieBot F12 控制台直接拔下来（ Vue.js v2.3.2，botui 0.3.4）

这里仅贴一下自己撸的BotUi Js代码，需要注意，创建 botui对象时，BotUI函数内的参数是需要和页面div id 所对应，这里我的id是hello-lkarrie

var botui = new BotUI('hello-lkarrie');

botui.message.add({
    delay: 800,
    content: "Hi, there👋"
}).then(function () {
    botui.message.add({
        delay: 1100,
        content: "这里是 LKarrie"
    }).then(function () {
        botui.message.add({
            delay: 1100,
            content: "一个整天不务正业的二次元傻卵 :("
        }).then(function () {
            botui.action.button({
                delay: 1600,
                action: [{
                    text: "然后呢？ 😃",
                    value: "sure"
                }, {
                    text: "少废话！ 🙄",
                    value: "skip"
                }]
            }).then(function (a) {
                "sure" == a.value && sure();
                "skip" == a.value && end()
            })
        })
    })
});
var sure = function () {
    botui.message.add({
        delay: 1600,
        content: "😘"
    }).then(function () {
        secondpart()
    })
},
    end = function () {
        botui.message.add({
            delay: 1600,
            content: "![...](https://image.lkarrie.com/images/2022/03/31/emoticon2.gif)"
        })
    },
    secondpart = function () {
        botui.message.add({
            delay: 1600,
            content: "目前在沪国摸爬滚打中xD"
        }).then(function () {
            botui.message.add({
                delay: 1600,
                content: "即使有较忙的工作的,也不能妨碍我天天深夜gaming!"
            }).then(function () {
                botui.message.add({
                    delay: 1600,
                    content: "就算生活被工作塞满,也总要挤挤空做一些自己喜欢的事嘛:P"
                }).then(function () {
                    botui.message.add({
                        delay: 1700,
                        content: "除了玩,偶尔也会捣鼓点自己感兴趣的东西啦"
                    }).then(function () {
                        botui.message.add({
                            delay: 2000,
                            content: "啥都摸摸学学,希望有一天能够被称为大佬(哈哈做梦"
                        }).then(function () {
                            botui.action.button({
                                delay: 1600,
                                action: [{
                                    text: "为什么叫LKarrie呢？ 🤔",
                                    value: "why-LKarrie"
                                }]
                            }).then(function (a) {
                                thirdpart()
                            })
                        })
                    })
                })
            })
        })
    },
    thirdpart = function () {
        botui.message.add({
            delay: 1E3,
            content: "It's just a name for me,类似姓名的音译和缩写咯"
        }).then(function () {
            botui.message.add({
                delay: 1600,
                content: "（起名真是件有难度的事情"
            }).then(function () {
                botui.action.button({
                    delay: 1600,
                    action: [{
                        text: "为什么Blog Header里又叫自己咕咕？ 🤔",
                        value: "why-gugu"
                    }]
                }).then(function (a) {
                    fourthpart()
                })
            })
        })
    },
    fourthpart = function () {
        botui.message.add({
            delay: 1E3,
            content: "其实自己20年就已经在搭小窝了,但因为各种原因（懒狗）一直没有好好弄起来..."
        }).then(function () {
            botui.message.add({
                delay: 1600,
                content: "最近终于重新拾起来,鸽了很久所以叫自己咕咕~"
            }).then(function () {
                botui.message.add({
                    delay: 1600,
                    content: "我,这一次搭博绝对不会鸽!（Flag"
                }).then(function () {
                    botui.message.add({
                        delay: 1600,
                        content: "嘻嘻"
                    }).then(function () {
                        botui.message.add({
                            delay: 2000,
                            content: "嘛,大概就是这么多啦,希望你能喜欢我的Blog~"
                        })
                    })
                })
            })
        })

    }

创建新页面

在Halo后台创建新的页面，用于展示BotUi对话机器人，需要注意

<div class="entry-content">
  <div class="moe-lkarrie" style="text-align:center; font-size: 45px; margin-bottom: 20px;">[さくら荘の咕咕]</div>
  <div id="hello-lkarrie" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
    与&nbsp;<ruby>
    咕&nbsp;咕&nbsp;<rp>
    （</rp>
     <rt>LKarrie</rt> 
    <rp>
    ）</rp>
    </ruby>
    对话中...</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>
<script src="/themes/LIlGG_Sakura/source/botui/vue.js">
</script>
<script src="/themes/LIlGG_Sakura/source/botui/botui.js"></script>
<script src="/themes/LIlGG_Sakura/source/botui/hello-lkarrie.js">