工作目录¶

Markup UI 使用设计时目录维护界面源文件，通过同步将文件导入资产目录，供 Unreal Engine 预览和运行时加载。两类目录在插件配置中设置。

设计时目录与资产目录¶

• 设计时目录：存放可编辑的 HTML、CSS、图片和字体，通常由界面设计人员维护。
• 资产目录：存放导入 Unreal 工程后的资产，供开发人员引用、文档资产预览和游戏运行时加载。

例如，设计时目录中的 pages/index.html 和 styles/main.css 同步后，在资产目录中保持对应的 pages/ 与 styles/ 结构。资产名称根据插件配置的命名规则生成；页面中仍使用源文件路径。

设计时目录/                  资产目录/
  pages/index.html    →       pages/HTML_index
  styles/main.css     →       styles/CSS_main

示例使用默认资产前缀。通过 Viewport 顶部的 Markup UI → Import Design Folder 同步设计文件；也可以将支持的文件单独拖入 Content Browser 导入。

支持同步的文件类型¶

同步功能识别以下文件，并将其导入为对应的 Unreal 资产：

不支持的文件类型会被跳过，不会导入为资产。受支持的文件仍需由 Unreal Engine 成功导入，才能用于页面。

资源域¶

资源域决定页面及其引用的样式、图片和字体从哪里查找：

文档及其引用的资源使用相同的资源域。文档资产预览和游戏运行时使用 Unreal 资产域，从资产目录查找，不直接读取设计时目录。

页面中的路径¶

页面使用源文件的逻辑路径，不需要写入 HTML_、CSS_ 等资产前缀：

<link rel="stylesheet" href="../styles/main.css">
<img src="/images/icon.png" alt="Icon">

在资产预览和游戏运行时：

• ../styles/main.css 相对于引用它的 HTML 文档位置解析。
• /images/icon.png 从全局配置的资产目录开始查找，不表示磁盘根目录或工程根目录。

CSS 中的路径¶

假设样式文件位于 styles/main.css，图片位于 images/background.png。

CSS 中的相对路径从样式文件所在位置解析：

/* styles/main.css */
.panel {
  background-image: url("../images/background.png");
}

也可以使用以 / 开头的根路径，从资产目录开始查找同一张图片：

.panel {
  background-image: url("/images/background.png");
}

修改设计时目录中的文件后，需要重新同步资产；修改资产目录或命名规则后，已打开的页面需要重新加载。详细路径规则见资源路径，配置项见插件配置。