页面代码与作品实时预览

页面代码决定模板的排版、样式和可点击元素。模板中间区域可以在“预览”和“代码”之间切换。

101 提供可整段复制的页面代码。只有自定义布局或交互时，才需要直接修改代码。

页面代码负责什么

指令和触发器规则负责准备数据，页面代码负责读取并显示数据。

页面代码可以使用变量占位符。常见形式：

const background = "{{frame.background}}"
const playerName = "{{state.player_name}}"

frame.background 来自当前帧，state.player_name 会在页面节点之间保留。变量不存在时，页面代码需要准备空值状态，避免整页报错。媒体变量完成素材绑定后，占位符会得到可显示或播放的素材地址。绑定方法见State 变量、Frame 变量与媒体绑定。

玩家点击后是否能触发规则，取决于页面元素是否匹配 Element Selector。适合用于规则的标记：

修改类名或属性后，需要同步更新触发器规则。

作品实时预览和运行预览都会把模板放入一个固定渲染窗口。页面根容器应填满该窗口：

html, body, #root, .template-root {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

继续遵守以下约束：

根容器使用 100vh 并叠加内外边距时，可能产生超出渲染窗口的高度。使用 height: 100% 和 box-sizing: border-box 更容易保持稳定。

从“代码”切回“预览”时，编辑器会编译当前草稿并刷新作品实时预览。编译失败后：

作品实时预览只检查当前模板。跨页面跳转和真实 AI 生成需要保存后使用运行预览。

点击顶部“保存作品”或关闭模板标签时选择“保存并关闭”，编辑器会：

任一步出现错误时，查看提示并保留当前标签。保存完成前不要刷新页面。

MoMo：页面按钮改了类名，触发器规则不会自动同步。改完代码后验证一次 CSS 选择器。