此篇文章大多只适用于Sakurairo主题，原文文章的内容太过于久远，再加上仅适合Sakura主题，已经不适用于Sakurairo了，所以重写一下文章，本文章是以雾时之森的文章以重制的

如果需要通用方法请到原文

原文(雾时之森)：https://fairysen.com/216.html

BOTUI展示：https://blog.tangbao.ltd/me/

介绍

BotUi Github：https://github.com/botui/botui

BotUi官网：https://botui.org/

教程

呜呜呜，但是把原文的代码放到Sakurairo内发现无法使用，于是就自己重新修改了亿些些，好累！！！

wordpress创建页面，不用选择模板，选择自定义HTML，将以下代码插入

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/botui.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/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>与 芸豆玥 对话中...</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>
    <script src="https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/botui.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/dialogue.js?这里的链接改成自己的"></script>

你只需要修改最下面的js链接，你可以以我的链接作为模板

https://cdn.jsdelivr.net/gh/YunDouYue/botui@main/dialogue.js

其他的你们怎么改就怎么改