组件数据导出与导入:高效复用页面模块
“组件数据导入导出”功能主要用于解决页面模块复用率低的问题。通过该功能,您可以将设计好的复杂组件(如轮播图、表单、预约系统等)作为“模板”独立保存下来。当您需要在其他页面或其他站点中重复使用这些设计时,只需导入已保存的数据即可,省去了重复搭建的时间,确保多页面风格的高度统一。
核心作用:将画布上的单个组件及其内部配置数据打包成JSON格式独立保存,以便在其他页面或项目中快速一键还原复用。
一句话描述:在站点设计页面的层级管理中选中目标组件并右键“导出数据”保存为本地TXT,随后在其他页面右键“导入数据”并粘贴TXT内容,即可瞬间完成组件克隆。
第一步:导出组件数据(备份/准备阶段)
1. 站点--设计--PC端设计,点击操作处蓝色的【站点设计】字体,进入站点的设计页面。

2. 在左侧的【层级】面板中,浏览并找到您需要导出的组件(例如图中的“分区容器”)。
3. 选中该组件点击鼠标右键,在弹出的菜单中找到并选择 【导出数据】。

4. 点击【导出数据】此时系统会弹出一个提示文字【组件数据已复制到剪贴板】,数据是一段 组件.JSON数据。
5. 新建一个TXT文档保存在桌面,将这段JSON数据完整复制并粘贴进去,命名为方便识别的名称(如“预约表单模板.txt”),保存备用。

第二步:导入组件数据(应用/复用阶段)
1. 进入您需要应用该组件的页面(可以是同一个站点的其他页面,也可以是全新的模板)。
2. 在左侧【层级】面板中,选中您希望承载该数据的父级组件(通常建议选中 【body】 或其他大的容器)。
3. 右键点击,在菜单中选择 【导入数据】。

4. 在弹出的“导入数据”窗口中,粘贴您刚才在TXT文档里复制好的那段JSON数据。
5. 点击右下角的 【确定】 按钮。

第三步:确认导入结果
1. 导入成功后,系统会自动在层级列表中生成一个带有蓝色虚线边框高亮选中的新组件。
2. 同时,右侧的编辑画布中也会立即渲染出这个刚刚导入的组件界面,您可以直接对其进行二次编辑或微调。

小贴士
● 精准定位与识别:导入成功后,组件会被蓝色虚线框高亮选中,且在层级列表中会有明显的选中状态,这能帮助您迅速确认数据已成功挂载,避免重复操作。
● 通用性强:导出的JSON数据相当于组件的“源代码”。只要系统版本兼容,您甚至可以将这个TXT文件发给同事,他们导入后就能直接获得一模一样的组件效果,非常适合团队协作和素材共享。
● 注意层级嵌套:如果您导入的是“分区容器”等包含子组件的复合模块,建议在导入时选中 body或一个空的容器,以免原有的排版结构发生冲突。