前言

一款自动回复文字、图片、视频的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>
    <!-- 回复配置可参考:https://www.sucaihuo.com/js/2519.html -->

    Sakura主题使用方法

  4. WP后台-Sakura主题设置-CDN-开启本地调用主题 js、css 文件
  5. 修改Sakura主题目录下的 js/sakura-app.js 文件,找到大概第10-20行的位置
    this.pjax = function() { // pjax reload functions (pjax 重载函数)
    pjaxInit();
    social_share();
    post_list_show_animation();
    copy_code_block();

    的下面添加
    //BotUI重载
    if ($("div").hasClass("popcontainer")) {
    loadBotui()
    }
    修改后为
        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();
    }
    }
    版本不同代码不同,添加代码就好。
    在此文件底部增加如下代码
    /*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://cdn.jsdelivr.net/gh/Fog-Forest/cdn@1.7/botui/botui.js',
    //上方JS中的'BotUI回复配置'修改为你自己的BotUI回复配置,其他不变
    function() {
    bot_ui_ini();
    mashiro_global.variables.has_bot_ui = true
    })
    }
    }
    }
  6. 在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">
    <center><h4>与 killuaの机器人 对话中...</h4></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>

    完成

    根据教程最后有个错误

    bot_ui_ini(); 未定义,有高手麻烦留言修复一下。。

转自 https://m1314.cn/216.html