蘑菇

文章	评论	标签
89	512	63

前言

BotUI 是一款强大的 JS 聊天机器人框架，可以自动回复文字、图片和视频。用户可以自由设置多种选项、触发关键词和输入框等内容，并根据需求自定义聊天内容和范围。回复的内容可以是文字、GIF 图片以及视频。我在我的博客中引用了该框架。

项目地址

BotUI GitHub 仓库

通用方法

引入 CSS 样式文件
在 <head> 部分添加以下代码：

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

设置聊天机器人的对话容器
在 <body> 部分添加对话容器的代码：
```
<div class="botui-app-container" id="botui-app">
    <bot-ui></bot-ui>
</div>
```

引入 JS 文件并设置预回复内容

加以下 JavaScript 代码以引入 BotUI 和 Vue.js，并设置预回复内容：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="build/botui.js"></script>
<!-- 回复配置可参考：https://docs.botui.org/react/custom -->

Sakura主题使用方法

在 WordPress 后台设置
进入 Sakura 主题设置，找到 CDN 选项，开启本地调用主题的 JS 和 CSS 文件。

修改 js/sakura-app.js 文件

打开 Sakura 主题目录下的 js/sakura-app.js 文件，找到大约第 10 行。此步骤主要是为了在开启 PJAX 后解决首次访问页面时聊天框不加载的问题。如果您没有开启 PJAX，可以跳过此步骤。

mashiro_global.ini = new function() {
    this.normalize = function() { // 页面首次加载时的初始化函数
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function() { // PJAX 重载函数
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        // BotUI
        if ($("div").hasClass("popcontainer")) {
            loadBotui();
        }
        coverVideoIni();
        checkskinSecter();
    }
}

在 js/sakura-app.js 文件底部增加代码

在该文件的底部添加以下内容：

/*BotUI*/
if ($("div").hasClass("popcontainer")) {
    loadBotui();
}
$("bot-ui").click(function() {
    loadBotui();
});

function loadBotui() {
    if ($('div').hasClass('popcontainer')) {
        if (mashiro_global.variables.has_bot_ui) {
            bot_ui_ini();
        } else {
            $.getScript('https://oss.amogu.cn/blog/botui/botui.js', function() {
                // 请根据您的 BotUI 回复配置修改此处
                bot_ui_ini();
                mashiro_global.variables.has_bot_ui = true;
            });
        }
    }
}

在 WordPress 中新建页面

新建一个页面，并在内容中填入如下代码：

<div class="popcontainer" id="fogforest" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px; border: 2px solid">
    <p></p>
    <center><strong>与 蘑菇君 对话中...</strong></center>
    <bot-ui>
        <center>
            <div style="background-image: url(https://cdn.jsdelivr.net/gh/Fog-Forest/[email protected]/botui/loading.svg); background-repeat: no-repeat; background-size: 10em; background-position: center; height: 10em;"></div>
            <p>Loading</p>
        </center>
    </bot-ui>
</div>