此篇文章大多只适用于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，将以下代码插入

<style>
    #hello-world {
      min-height: 300px;
      padding: 2px 6px 4px 6px;
      background-color: rgba(242, 242, 242,0.5);
      border-radius: 10px;
      2px solid;
    }
    
    .bot-ui-loading {
      background-image: url(https://cdn.jsdelivr.net/gh/Ummio/botui@main/loading.svg);
      background-repeat: no-repeat;
      background-size: 10em;
      background-position: center;
      height: 10em;
    }
    
    #message-container {
      overflow: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ummio/botui@main/botui.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ummio/botui@main/botui-theme-default.css">
  <div id="hello-world">
    <div id="message-container">
      <p></p>
      <center><strong>与 糖宝 对话中...</strong></center>
      <bot-ui>
        <div class="bot-ui-loading"></div>
        <p>Loading</p>
      </bot-ui>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/gh/Ummio/botui@main/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/Ummio/botui@main/botui.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/Ummio/botui@main/dialogue.js?这里的链接改成自己的"></script>

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

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

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