SuperAPI AI 工具集

cloudcannon-visual-editing

前端与建站

查看项目

更新于 10-15 19:50

技能介绍

用途:为 CloudCannon 站点添加 Visual Editor 支持,让页面区块(文本、图片、数组、组件)可编辑,设置组件重渲染以实现实时预览,调试未显示或未更新的可编辑区域,并为数据文件支撑的共享局部模板添加可编辑区域。

主要能力:@cloudcannon/editable-regions 使页面元素在 CloudCannon Visual Editor 中可交互。区域类型包括 text(内联富文本,属性 data-editable="text" data-prop data-type)、image(图片选择器,data-editable="image" data-prop)、array(列表增删改,容器上 data-editable="array" data-prop)、array-item(每个子项 data-editable="array-item")、component(区块重渲染,data-editable="component" data-component data-prop)、source(模板中硬编码文本,data-editable="source" data-path data-key)。经验法则:区块含条件元素、样式绑定或派生内容时用 component,并在其中嵌套 text、image、array 等基础类型做内联编辑。

使用方式:工作流为 Setup(运行 scripts/setup-editable-regions.sh 安装包、接入 Astro 集成、创建 registerComponents.ts 桩,并添加条件式 registerComponents 导入)、Census(记录每个关键页面上每个可见区块及处理决策)、Implement(按普查逐区块添加可编辑属性)、Verify(运行对应 SSG 工作流文档中的完整性清单)。SSG 专属文档从该 SSG 的 overview.md 进入,Astro 另有 visual-editing.md、visual-editing-reference.md、troubleshooting.md。

适用场景:新站点或现有站点接入 Visual Editor;让页面区块可编辑;为实时预览设置组件重渲染;调试区域不显示或不更新;为数据文件支撑的共享局部模板添加区域。

限制:字段没有 _inputs 条目或集合未配置时,需先用 cloudcannon-configuration 配置,否则编辑器会报错;编辑器需在富文本中插入新标记时应使用 cloudcannon-snippets,可编辑区域只编辑已渲染内容;页面完全无法在 Visual Editor 打开通常是集合 url 错误,而非区域问题。多语言站点需阅读 make-site-multilingual,翻译键 data-rosey 须放在区域宿主上而非内部。区域写好后可用 cloudcannon-dev-server 启动本地 CloudCannon 边编辑边重建。