WordPress BotUI速通教程

最后更新于 2024-12-21 nicocat 2985 次阅读

BotUI（就是关于页的对话框）

在博客放一个BotUI，BotUI使用，博客使用BotUI快速入门。

转自：https://yangziwen.cn/2022/03/03/wordpress-botui/

下载：

https://nicocat.cc/mods/botui/botui.min.css
https://nicocat.cc/mods/botui/botui-theme-default.css
https://nicocat.cc/mods/botui/botui.js
https://nicocat.cc/mods/lib/vue.min.js

然后在页面嵌入以下自定义html内容，在前面一部分使用类似的方式引入上面这四个文件即可。
回复配置请自行举一反三。

<link rel="stylesheet" href="/mods/botui/botui.min.css">
<link rel="stylesheet" href="/mods/botui/botui-theme-default.css">
<script src="/mods/botui/botui.js"></script>
<script src="/mods/lib/vue.min.js"></script>

<div id="content" class="site-content">
    <div class="entry-content">
        <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">
            <center>
                <span style="font-size: large;">与&nbsp;nicocat&nbsp;对话中...</span>
            </center>
            <bot-ui style="background-color: transparent;">
                <center>
                    <div
                        style=" background-image: url(https://cdn.jsdelivr.net/gh/Karensky/cdn@1.0.6/botui/loading.svg);background-repeat: no-repeat;background-size: 10em;background-position: center;height: 10em;">
                    </div>
                    <p>Loading</p>
                </center>
            </bot-ui>
        </div>
    </div>
</div>
<script type="text/javascript">
    function runBotui() {
        /*
        * BotUI回复配置
        */
        var botui = new BotUI("fogforest");
        botui.message.bot({
            delay: 200,
            content: "你好，喵！"
        }).then(function () {
            return botui.message.bot({
                delay: 1000,
                content: "我是兰啦罗喵~"
            })
        }).then(function () {
            return botui.message.bot({
                delay: 1000,
                content: "一位19岁的大学牲！👻"
            })
        }).then(function () {
            return botui.action.button({
                delay: 1500,
                action: [{
                    text: "然后呢？ 😃",
                    value: "then"
                },
                {
                    text: "少废话！ 🙄",
                    value: "then2"
                }]
            })
        }).then(function (res) {
            if (res.value == "then") {
                then()
            }
            if (res.value == "then2") {
                then2()
            }
        });
        var then = function () {
            botui.message.bot({
                delay: 1500,
                content: "😘"
            }).then(function () {
                return botui.message.bot({
                    delay: 1500,
                    content: "喜欢瞎折腾"
                })
            }).then(function () {
                return botui.message.bot({
                    delay: 1500,
                    content: "目前在读电子商务专业..."
                })
            }).then(function () {
                return botui.message.bot({
                    delay: 1500,
                    content: "会写点网页，会一点营销..."
                })
            }).then(function () {
                return botui.message.bot({
                    delay: 1500,
                    content: "喜欢可爱的小萝莉..."
                })
            }).then(function () {
                return botui.action.button({
                    delay: 1500,
                    action: [{
                        text: "看看你的",
                        value: "next"
                    }]
                })
            }).then(function (res) {
                return botui.message.bot({
                    delay: 1500,
                    content: '<a target="_blank" rel="noopener" href="https://space.bilibili.com/413110087">看看我的B站作品</a></br><a target="_blank" rel="noopener" href="https://github.com/nicocatxzc">看看我在github写的答辩</a>'
                })
            })
        }
        var then2 = function () {
            botui.message.bot({
                delay: 1500,
                content:'<a target="_blank" rel="noopener" href="https://files.nicocat.cc/wp-content/2024/12/黑手.mp4">好康的</a>'
            }).then(function () {
                return botui.action.button({
                delay: 1500,
                action: [{
                    text: "对不起",
                    value: "then"
                },
                {
                    text: "那咋了🙄",
                    value: "then2"
                }]
            })
            }
            ).then(function (res){
                if (res.value == "then") {
                then()
            }
            })
        }
    }
    try {
        runBotui()
    } catch (error) {
        if (error instanceof ReferenceError) {
            // handle this expected error
            console.log("botui cdn load failed, refresh");
            window.location.reload();
        } else {
            // handle unexpected error
            console.log("[botui error]:", error);
        }
    }
</script>