Featured image of post 『Sakurairo 主题美化 #03』JS 聊天机器人框架 BotUI

『Sakurairo 主题美化 #03』JS 聊天机器人框架 BotUI

介绍了如何在 Sakurairo 主题 中集成 BotUI 聊天机器人框架。提供了代码示例和修改链接的步骤,支持自定义聊天内容和触发条件。

介绍

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

BotUI Github:https://github.com/botui/botui

BotUI官网:https://botui.org/

BotUI 展示:https://pp.0a0.me/about/

 

教程

此代码为大佬 @汤包 重写版。

    <link rel="stylesheet" href="https://pp.0a0.me/botui/botui.min.css" />
    <link rel="stylesheet" href="https://pp.0a0.me/botui/botui-theme-default.css" />
<div id="dialogue" 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>与 pp 对话中...</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>
    <script src="https://pp.0a0.me/botui/vue.min.js"></script>
    <script src="https://pp.0a0.me/botui/botui.js"></script>
    <script src="https://pp.0a0.me/botui/discuss.js"></script>

你只需要修改最下面的 JS 链接,你可以以我的链接作为模板。

discuss.js

 

摘自: [重制]JS 聊天机器人框架 BotUI 使用笔记 - 汤包

使用 Hugo 构建
主题 StackJimmy 设计