前言
一款自动回复文字、图片、视频的JS聊天机器人框架 BotUI,可以自由设置多种选项、触发关键词、输入框等内容,聊天内容或范围也可以自由设置,回复内容可以是文字、图片(GIF亦可)、视频,我在博客中引用了此框架。
项目地址
通用方法head部分,需要引入CSS样式文件
body部分,设置好聊天机器人的对话容器位置
Sakura主题使用方法WP后台-Sakura主题设置-CDN-开启本地调用主题 js、css 文件
修改Sakura主题目录下的 js/sakura-app.js 文件,找到大概第10行的位置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();
}
}
在此文件底部增加如下代码/*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
})
}
}
}在WordPress中新建一个页面,内容中填入如下代码
与 雾时之森 对话中...Loading
成果展示