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

前端显示支持

使用代码块包裹需要渲染的代码部分，放置于楼层消息中即可渲染成前端界面。

示例

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> 标签

为防止高度无限增长，代码中的min-height: * vh 会被自动转换为以浏览器高度为基准，而不是以iframe高度为基准。

获取角色头像

使用CSS类

若要在界面中展示当前角色卡或用户的头像，需使用CSS类 user-avatar（或user_avatar ）， char-avatar（或char_avatar）。

示例

在你想要放入头像的地方设置 class 为 user-avatar（或user_avatar ）， char-avatar（或char_avatar），此时容器的背景图片就会变为当前用户或角色的头像。

html

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

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

使用宏

头像链接已注册为宏，{{userAvatarPath}}和{{charAvatarPath}}两个宏，可直接替换为当前user和char的图像路径。

示例

html

<div class="char_avatar" style="background-image: url('{{charAvatarPath}}');"></div>
<div class="user_avatar" style="background-image: url('{{userAvatarPath}}');"></div>

提示

在聊天中途更换了 user 角色, 其显示逻辑与酒馆一致, 会在新的楼层显示新的头像
想要将旧的楼层头像显示同步, 需要点击用户面板的同步按钮。

加载动画

在界面内资源未加载完成时，会显示加载动画蒙版。可以在代码中任意位置放置  来禁用扩展内置的加载动画。

示例

html

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

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

前端显示支持 ​

获取角色头像 ​

使用CSS类 ​

使用宏 ​

加载动画 ​

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

前端显示支持

获取角色头像

使用CSS类

使用宏

加载动画