SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场Using Content Driven Development

Using Content Driven Development

编程与开发

查看项目

更新于 10-15 10:05

技能介绍

用途

内容驱动开发（Content Driven Development，简称 CDD）是 AEM Edge Delivery Services 开发中强制执行的流程，其核心理念是内容与作者需求优先于开发者便利。该技能作为开发工作流的编排者，确保代码基于真实内容构建，并采用对作者友好的内容模型。

核心理念

  • 作者需求先于开发者需求：为 AEM Edge Delivery 构建结构时，作者是主要使用者，内容模型必须直观易用，即使这意味着装饰代码更复杂。
  • 通过准备提升效率：在编码前创建或识别测试内容，可带来即时测试能力、更好的 PR 工作流（测试内容兼作 PSI 检查的 PR 验证链接）、活文档（测试内容常作为作者文档与示例），以及更少的假设（真实内容能揭示代码优先方法遗漏的边界情况）。
  • 关键规则：在识别或创建用于测试更改的内容之前，绝不开始编写或修改代码。

适用场景

适用于所有 AEM 开发任务：

  • 创建新块
  • 修改现有块（结构性或功能性变更）
  • 核心装饰功能变更
  • 需要验证的缺陷修复
  • 任何影响作者创建或组织内容的代码

仅在以下情况可跳过 CDD：

  • 仅涉及 CSS 的琐碎样式调整（但仍需识别测试内容用于验证）
  • 不影响创作的配置变更

如有疑问，遵循 CDD 流程。

相关技能

该技能在适当阶段编排其他技能：

  • content-modeling：需要设计新内容模型或修改现有模型时调用
  • building-blocks：实现阶段创建或修改块时调用
  • testing-blocks：验证阶段参考，用于全面测试
  • block-collection-and-party：用于查找相似块和参考实现

内容优先流程

按顺序执行以下阶段，不得跳过步骤。

阶段一：内容发现与建模

第一步：确定内容可用性

  • 新块：跳至第二步（内容模型设计）。搜索不存在的内容是浪费时间。
  • 修改现有块：询问用户“使用此块的现有内容是否已存在，可用于测试？”
    • 是：识别现有内容进行测试。使用 scripts/find-block-content.js 脚本搜索包含该块的页面，或询问用户页面路径。验证内容在本地开发环境正确加载。进入阶段二（若结构不变则跳过内容建模）。
    • 否：进入第二步。

第二步：内容模型设计

  • 必需场景：所有新块；现有块的结构性变更（增删改章节、变体或创作结构）。
  • 询问用户是否使用 content-modeling 技能设计对作者友好的内容模型。若用户选择自行定义，请其描述作者将使用的内容结构并记录。

第三步：内容创建

  • 询问用户希望：在 CMS 中创建内容（推荐），或创建临时本地 HTML 文件。
  • 选项一：CMS 内容（推荐）。引导用户在 CMS 中创建内容，等待确认已创建并发布，获取内容 URL，验证本地加载，进入阶段二。
  • 选项二：本地 HTML 文件（临时）。在 drafts/ 文件夹创建符合内容模型结构的 HTML 文件，提醒用户使用 aem up --html-folder drafts 重启开发服务器，并注意在提交 PR 前需创建实际 CMS 内容。

测试内容兼作作者文档：测试内容常可兼作面向作者的文档。当块简单、测试内容展示所有变体与用例、体现最佳实践且示例真实时，测试内容即可作为文档。当块配置复杂、存在边界情况或项目要求正式文档时，则需单独文档。结构化测试内容时，创建全面示例、使用真实内容、体现最佳实践并考虑放置位置（如 Sidekick Library 项目可放在 /tools/sidekick/library/，Document Authoring 放在 DA Library 结构，简单文档用 /drafts/docs/ 或 /drafts/library/，Universal Editor 遵循项目特定模式）。

阶段二：实现

关键：在确认测试内容存在且可访问之前，不得开始阶段二。

  • 块开发：调用 building-blocks 技能，提供内容模型和测试内容 URL，遵循其流程实现，完成后返回本技能进入阶段三。
  • 核心功能变更：遵循标准开发实践，修改脚本、样式或配置，全程针对已识别内容测试，确保不破坏现有块或内容模型，进入阶段三。

阶段三：验证

第一步：使用真实内容测试

  • 在本地开发环境查看测试内容
  • 验证所有变体正确渲染
  • 检查响应式行为（移动端、平板、桌面）
  • 测试真实内容揭示的边界情况
  • 验证无障碍基础（键盘导航、屏幕阅读器友好）

第二步：运行质量检查

  • 必须运行 npm run lint
  • 若失败，使用 npm run lint:fix 修复

第三步：全面测试

  • testing-blocks 技能由 building-blocks 自动调用。对于其他代码变更，调用 testing-blocks 技能，其提供：逻辑密集型工具的单元测试策略、使用 Playwright/Puppeteer 的浏览器测试、代码质量检查、GitHub 检查的性能验证，以及 keeper 与 throwaway 测试的指导。

第四步：PR 准备

  • 确保测试内容存在于 CMS（不仅是本地 HTML）
  • 测试内容 URL 可访问用于 PSI 检查
  • 所有 lint 通过
  • 作者文档已更新（如适用）
  • 测试内容 URL 将用作 PR 验证链接。

应避免的反模式

  • 在理解内容模型之前就开始写代码
  • 未查看真实示例就对内容结构做假设
  • 创建对开发者友好但对作者不友好的内容模型
  • 为“节省时间”跳过内容创建（后期花费更多时间）
  • 针对想象的内容而非真实内容测试
  • 将测试内容创建视为与开发工作流分离

工作流摘要

  1. 内容发现：现有内容？→ 使用它；新块/结构？→ 设计内容模型 → 创建测试内容
  2. 实现：基于真实内容模型构建代码；持续用实际内容测试
  3. 验证：用测试内容全面测试；质量检查（lint、无障碍）；用测试 URL 准备 PR

关键规则：没有测试内容绝不进入实现阶段。

脚本与工具

查找现有块内容，使用提供的脚本搜索包含特定块的页面：

# 在 localhost 搜索（默认）
node .claude/skills/content-driven-development/scripts/find-block-content.js <block-name>

# 搜索特定变体
node .claude/skills/content-driven-development/scripts/find-block-content.js <block-name> localhost:3000 <variant>

# 在线上站点搜索
node .claude/skills/content-driven-development/scripts/find-block-content.js <block-name> main--repo--owner.aem.live

# 在预览站点搜索变体
node .claude/skills/content-driven-development/scripts/find-block-content.js <block-name> main--repo--owner.aem.page <variant>

示例：

node .claude/skills/content-driven-development/scripts/find-block-content.js hero
node .claude/skills/content-driven-development/scripts/find-block-content.js hero localhost:3000 dark
node .claude/skills/content-driven-development/scripts/find-block-content.js cards main--site--owner.aem.live three-up

该脚本查询站点的 query-index 以查找包含指定块（及可选变体）的所有页面并返回其 URL，使用正确的 DOM 解析准确识别块。

与其他技能的集成

该技能作为 AEM 开发工作流的编排者：

  • 内容建模阶段：调用 content-modeling 技能进行对作者友好的设计
  • 实现阶段：调用 building-blocks 技能进行块开发；参考 block-collection-and-party 技能获取模式
  • 验证阶段：参考 testing-blocks 技能进行全面测试

遵循此编排可确保所有开发遵循内容优先原则。