SuperAPI AI 工具集

cloudcannon-snippets

测试与质量

查看项目

更新于 10-15 19:50

技能介绍

用途:为 CloudCannon 站点添加片段(snippet)支持,使编辑者可在富文本内容编辑器中插入并编辑复杂标记,如组件、短代码、嵌入内容。该技能同时覆盖 SSG 层(组件如何导入与构建)和 CloudCannon 层(_snippets 配置,用于让编辑器识别语法)。

主要能力与适用场景:适用于新建或已有 CloudCannon 站点添加片段支持、为内容编辑器配置 MDX 组件、向 markdown 内容添加内联 HTML 片段(figure、video、details)、调试片段解析、往返(round-trip)或工具栏问题。

不适用场景:组件应作为页面构建器块而非内联内容时,应参考 cloudcannon-configuration 与迁移技能的页面构建指南;让已有渲染元素就地可编辑属于 cloudcannon-visual-editing;纯 markdown 内容无需片段配置。

使用方式:文档包含 snippets.md(总览、配置层级、片段属性、工具栏设置、.md 中的原始 HTML 片段)、template-based.md(组件语法匹配内置模板)、raw.md(自定义语法,如 client:load、非标准属性)、built-in-templates.md、gotchas.md、troubleshooting.md,以及 Astro 的 astro/overview.md。快速决策:语法匹配内置模板用 template-based;含额外语法或 SSG 指令用 raw;.md 内联 HTML 用 raw snippets。

检查清单:内容文件中每个组件都有 _snippets 条目;相关内容块的 _editables 包含 snippet: true;每个片段能正确往返;为片段字段配置 _inputs(图片字段用 type: image);配置片段预览(含图片用 view: gallery);picker_preview 使用静态值。

限制与常见错误:内置模板存在已知边界情况,需验证往返;未配置工具栏则编辑者无法插入片段;不要使用 _snippets_imports,应写显式 _snippets 条目;Astro 需在 astro.config.mjs 接入 astro-auto-import 并从 MDX 文件移除 import 行,四个流水线步骤缺一不可;MDX 中的内联图片网格不应保留为原始 HTML,应抽取为自闭合组件并配置对应 _snippets 条目。具体命令与代码示例资料中未完整提供。