在楼层消息中显示前端界面

前端显示支持

使用代码块包裹需要渲染的代码部分即可进行渲染。

示例

html

```
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body> 
    <h1>欢迎使用脚本注入功能！</h1>
    <button onclick="showMessage()">点击我</button>    
    <script>
      function showMessage() {
        alert("你点击了按钮！");
      }
    </script>
  </body>
</html>
```

注意

被扩展识别并渲染需要同时满足以下条件：

代码放置在代码块```标识中
代码中同时存在 <body> 和 </body> 标签

获取 User 头像

若要在界面中展示 User 头像，需使用 class user-avatar或user_avatar。

示例

在你想要放入用户头像的地方设置 class 为 user-avatar或user_avatar, 此时容器的背景图片就会变为当前用户头像

html

<div class="user-avatar"></div>
<!-- 或者<div class="user_avatar"></div> -->

class 样式只导入了图片链接 background-image: url('${avatarPath}');, 没有特意设置其他样式, 具体的图片填充方式需使用者手动添加样式。

提示

在聊天中途更换了 user 角色, 其显示逻辑与酒馆一致, 会在新的楼层显示新的头像
想要将旧的楼层头像显示同步, 需要点击用户面板的同步按钮。
如果想要获取角色（char）的头像，可直接插入<img src="./characters/.png">

禁用加载动画

代码中任意位置放置  来禁用扩展内置的加载动画。

示例

html

<body>
  <!-- disable-default-loading -->
</body>

在楼层消息中显示前端界面 ​

前端显示支持 ​

获取 User 头像 ​

禁用加载动画 ​

在楼层消息中显示前端界面

前端显示支持

获取 User 头像

禁用加载动画