前言

一款自动回复文字、图片、视频的JS聊天机器人框架 BotUI，可以自由设置多种选项、触发关键词、输入框等内容，聊天内容或范围也可以自由设置，回复内容可以是文字、图片（GIF亦可）、视频，我在博客中引用了此框架。

项目地址

通用方法

1. head 部分，需要引入 CSS 样式文件

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

2. body 部分，设置好聊天机器人的对话容器位置

<div class="botui-app-container" id="botui-app">
    <bot-ui></bot-ui>
</div>

3. 引入 botui.js、vue.js，设置好预回复的内容

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="build/botui.js"></script>
<!-- 回复配置可参考：http://docs.botui.org/guide.html#hello-world -->

Sakura主题使用方法

1. WP后台-Sakura主题设置-CDN-开启本地调用主题 js、css 文件

2. 修改Sakura主题目录下的 js/sakura-app.js 文件，找到大概第10行的位置，这一步主要是为了解决开启 PJAX 后，首次访问页面聊天框不加载的问题，如果没有开启 PJAX 可以忽略

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

3. 然后在此文件 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',
                //上方JS中的'BotUI回复配置'修改底部为你自己的 BotUI 回复配置，其他不变
                function() {
                    bot_ui_ini();
                    mashiro_global.variables.has_bot_ui = true
                })
        }
    }
}

3. 最后在 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; 2px solid">
    <p></p>
    <center><strong>与 蘑菇君 对话中...</strong></center>
    <bot-ui>
        <center>
            <div style=" background-image: url(https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@1.7/botui/loading.svg);background-repeat: no-repeat;background-size: 10em;background-position: center;height: 10em;"></div>
            <p>Loading</p>
        </center>
    </bot-ui>
</div>

预览

https://fairysen.com/about/