创建、更新和重构块 block-development
使用Experience现代化代理进行Edge Delivery Services的持续开发和迁移。 从作者的需要和实际内容开始，然后选择支持它们的最小实施。
代理遵循内容驱动开发(CDD)来完成此工作。 它从实际内容以及作者如何创建内容开始，然后编写代码。 这可以保持内容模型易于作者使用，并避免只有开发人员才能填充的块。
连接预期的存储库和分支，确认修改权限，并识别存储内容的🔗。 在更改共享代码或内容模型之前保留基线。
创建块前撰写 composition
HTML元素是基本的构建单位（或原子）：标题、段落、链接、列表和图像。 作者应尽可能为这些内容使用默认内容（块外的内容）。 全局样式和CSS自定义属性或设计令牌，用于定义共享排版规则、颜色、间距和链接/按钮演示。
块允许作者标记构成一个组件的内容，例如一组卡片或轮播，在这些组件中，代码无法将其与周围的默认内容区分开。 在您的网站提供的HTML中，块是将块名称用作其类的div。 项目的blocks/<name>/<name>.js和blocks/<name>/<name>.css在浏览器中对其进行修饰。 当代码可以识别默认内容中的模式时，它可以构建块本身，aem.live会调用自动阻止：例如，AEM样板将指向/widgets/页面的链接转换为小组件块。 保持数据块轻量化和集中化。 仅视觉差异不需要新块：CSS和JavaScript可以设置默认内容的样式，而变量或区域样式可以具有这种差异。
David模型为作者可以轻松创建的内容收集aem.live规则：首选默认内容，避免在块内使用块，保持块数和变体数较小，并允许按钮从它们所在的块或区域采用其样式。 当某个块执行与块集合中的某个块相同的作业时，请重用该块的内容模型。
在生成代码之前，请检查项目的约定：
Edge Delivery Services没有内置的按钮组或脚注控件。 每个规则都是项目代码适用于创作内容的约定，因此请检查项目如何实施并测试渲染的结果。
示例：不带原子块的灵活Teaser composition-example
基于组件的Adobe Experience Manager项目通常提供Teaser组件或单独的标题、图像、文本和按钮组件，以便作者可以组合这些组件。 例如，WKND示例站点的主页使用核心组件Teaser来提升每次旅程。 使用Edge Delivery Services，作者可以在部分或块单元格中直接编写与默认内容相同的元素：
[Image]
## Downhill Skiing Wyoming
A skier's paradise far from crowds and close to nature.
**[View trip](/adventures/downhill-skiing-wyoming)**
_[All adventures](/adventures)_
在当前AEM样板中，单独存在于段落中的链接在格式化后将成为按钮：主按钮为粗体，辅助按钮为斜体，重音按钮为粗加斜体。 纯链接或句子内的链接仍保持为链接。 全局样式使这些按钮在默认内容和内部块中具有相同的外观。
作者可以添加、删除或重新排序标题、文本、图像和链接，而无需使用新组件。 只有在作者必须标记哪些元素属于一起的情况下，才需要Teaser或主页块；CSS和JavaScript也可以将图像放置在默认内容中的文本旁边。 项目可以更改这些约定，因此要求代理在依赖它们之前检查项目的脚本和样式。
提示输入块 block-prompts
您可以从一个简短提示开始，如“创建证明块”。 添加上下文以帮助代理匹配特定内容：
引用页面或屏幕快照显示目标外观。 它没有定义作者编辑的内容，因此也这样说。
重用现有块 reuse-blocks
在代理创建块之前，它会查找一个块以重复使用或调整：在您项目的blocks文件夹中，以及块集合和块参与方中的引用代码。 在迁移期间，它还会检查您的块库（如果有）。
- 要重用另一个存储库中的块，请首先将它们添加到此项目的
blocks文件夹中，例如，通过将它们推送到您的分支，然后将代码提取到控制台中。 - 在项目说明文件中记录您的命名、变体和内容约定，以便新块遵循这些约定。
逐个构建块 iterate-blocks
当您需要多个块时，不要在一个提示中要求所有块。 首先构建一个或两个代表性块，并检查其内容模型、样式和创作。 然后，继续其他决策，以便您所做的决策（例如名称、变体和间距）得以延续。 在迁移中，先生成并验证一个代表性模板的块，然后再生成和验证其余模板；请参阅批量导入工作流。
在迁移前设置块行为 block-instructions
迁移会从它在源页面上找到的内容生成块。 要在代理生成块之前控制如何构建块，请执行以下操作：
- 在迁移提示中描述它，例如，哪些源节成为包含变体的一个块，哪些部分作者可以编辑，或者列表必须动态加载其项🔗。
- 在开始之前，在项目指令文件中写入持久约定。
- 在Planning视图中，在生成代码之前更正块类型和变体。 若要描述某个块应如何表现，请选择该块，选择添加到聊天，然后编写您的请求。
运行期间，自动模式不接受指令。 随后在控制台中优化其块。
创建块 create
提供创作任务、示例内容、所需的行为和设计、存储内容的位置以及测试页面。
- 要求代理检查现有块和适当的引用实现。 首选重复使用或变体而不是重复项。
- 定义作者可以理解的内容模型。 自然使用标题、链接、图像和分组的内容，而不是将CSS或实施详细信息公开为字段。
- 首先创建代表性内容。 包括长文本、缺少可选值、多个项和有意义的图像/链接。
- 仅实施所需的HTML修饰、CSS和JavaScript。 重用项目令牌和共享实用程序。
- 对于Experience Manager创作，请更新源模型/组件配置，并通过项目工作流重新生成聚合。 块的模型定义作者在通用编辑器中编辑的字段；编辑器读取模型，而不是文档中的表，因此块只有在其模型定义这些字段后才能在那里编辑。 检查转换和创作提示。
- 验证，然后记录作者可以编辑的示例和允许的变体。
例如：
为我们基于文档的页面创建证明块。 从以下实际内容示例开始：
/about和/customers。 首先检查现有块。 作者需要编辑报价、归因和可选图像，而无需配置布局。 使用我们的令牌。 包括长文本和无图像示例。 请勿上传、推送或发布。
将示例路径替换为您自己的路径。
结果是可重用的代码、作者需要一个的模型以及作者可以编辑的示例内容。
代理随块提供的内容 block-deliverables
- 块文档：当迁移创建块时，它会根据在页面上找到的内容模型生成块，并为开发人员添加自述文件，并为作者添加创作指南。 查看两者，在更改块时保持其最新，并从项目的说明文件中引用它们，以便以后的对话遵循块的惯例。
- 示例内容：代理程序为块生成示例内容，以便您可以使用真实的内容预览它们。 在站点目录中，使用 查看示例 打开块的示例页面。
- 块库：块库允许作者查找自定义块并将其插入页面，其中示例内容显示每个块的使用方式。 要设置库，请要求代理为Experience Workspace（取代文档创作）或Experience Manager创作生成块库，包括示例内容和库配置。 块库设置是可选功能，可为您的项目启用。 检查创作体验中的结果。 将设置中的 库URL 设置为库的
library.json文件，该文件列出了可用的块、其变体和示例内容。
更新现有块 update
提供块名称、当前示例/变体、请求的更改和兼容性要求。
- 使用块、共享样式/实用程序和现有测试标识页面。
- 指明必须保持不变的内容，包括现有的内容结构和交互。
- 进行更改。 演示文稿更改仅限CSS或JavaScript，因此它不会接触内容模型或需要重新导入内容。
- 对代表性内容测试已更改的行为和未受影响的变体。
- 如果需要进行不兼容的模型更改，请在应用现有内容之前就迁移现有内容的方式以及接受创作影响的人达成一致意见。
例如：
更新
cards以使批准的次链接变体在/products和/blog上工作。 保留现有的默认变体和图像变体及其创作内容。 检查键盘交互和移动设备包装。 请勿重写其他页面或上载内容。
将示例路径替换为您自己的路径。
移交更改的行为、受影响的变体、创作说明和任何所需的内容更改。
重构而不更改结果 refactor
重构可改进实施，同时保留同意的行为。 这与重新分组目录、重新设计块或迁移其内容模型不同。
- 请命名要改进的代码和原因，例如重复的修饰逻辑。
- 记录不得更改的内容：内容模型、外观、响应式行为、可访问性、其他代码依赖的选择器和API以及集成。
- 建立基线示例和现有测试。 在合并共享代码和样式之前，请检查它们的使用情况。
- 要求实现目标的最小重构。 将任何必要的行为/模型更改明确分开。
- 在受影响的页面和变体之间比较之前和之后，运行项目检查并检查差异。
例如：
在
blocks/cards/cards.js和blocks/teaser/teaser.js中重构重复的卡装饰逻辑。 保留已编写的模型、输出语义、外观、链接行为、键盘访问和Analytics挂接。 使用/products和/blog作为回归示例。 报告兼容性风险和测试结果。 请勿迁移内容或推送更改。
将示例路径替换为您自己的路径。
没有单独的重构命令：您在聊天中询问，而工程师会在您设置的限制内像开发人员那样更改代码。
构建动态块 dynamic-blocks
动态块在浏览器中加载或计算其内容，而不是只显示作者编写的内容。 示例包括最新文章的列表、搜索结果或过滤的列表。 要求代理在迁移后像任何其他块一样创建一个块，或者将迁移的块更改为按此方式工作。 描述：
- 数据源，如网站的查询索引、以JSON格式提供的电子表格或API。
- 作者控制的内容，如项目数、要列出的文件夹或排序顺序。 代理将这些设置建模为配置块：由键和值组成的双列表。 仅将其用于更改块加载或显示的内容的设置，并使用变体来区分样式。
- 每个项显示的内容以及没有结果或数据无法加载时块显示的内容。
例如：
创建一个文章列表块，以显示网站查询索引中最新的六篇文章，其中包括图像、标题和日期。 作者将文章数量和文件夹设置为在键值表中列出。 没有文章时显示短信。 在/news上测试。 请勿上传、推送或发布。
查询索引仅包含已发布的页面，并且仅包含其配置提取的属性，因此请在测试之前检查这两个属性。 验证空状态和错误状态以及正常结果。
连接服务和应用程序 integrations
代理将编写代码，以将您的站点连接到其他系统，包括其加载项未涵盖的系统。 在Edge Delivery Services之外工作介绍如何与它集成。 本节介绍该代码的运行位置。
Edge Delivery Services页面在访客的浏览器中运行此代码，因此每个连接都是块、小部件或项目脚本的一部分。 如果代理程序必须在工作过程中调用需要密钥的API，请在 设置 中添加密钥，而不是在聊天中添加密钥。
- 应用程序：表单、搜索页面、商店定位器或帐户区域几乎没有编写的内容。 将其构建为构件：存储库的
/widgets/文件夹中的自包含应用程序，作者通过插入其链接将其放置到页面上。 现有的应用程序（例如使用React构建的应用程序）同样可以调整。 - API：块或小组件从浏览器调用API。 API必须接受来自您站点域（包括预览站点和实时站点）的请求。 如果其他网站必须读取您网站的资源，请为它们需要的路径配置自定义标头，绝不要为所有源配置。
- 密钥：存储库中的所有内容都会传送到浏览器，因此不能包含API密钥或令牌。 当API需要某个密码时，请通过保存该密码的服务器端服务调用它，例如Adobe App Builder或API Mesh，然后让块调用该服务。
- 地图、视频和其他嵌入式服务：某些服务会发布适用于浏览器的密钥，例如许多地图服务，并且您会将每个密钥限制在您网站的域中，包括预览和实时网站。 该限制会保护密钥，因为每个访客都可以读取它。 在访客访问服务时加载，而不是在页面的其余部分加载，这样就不会减慢页面速度。
- Commerce： Commerce Pages涵盖Adobe Commerce店面的加载项和其他商务平台的路由。
- Forms： 表单提交介绍了Adobe Experience Manager Forms的加载项以及如何将表单连接到任何目标。
- Analytics、标记管理和同意：在页面呈现之后加载这些脚本，以便它们不会减慢速度。 查看将您的Lighthouse得分保持为100。 在自动模式的 包含集成 中，代理会添加支持的设置，并关闭这些设置，直到您将其打开。
加载项是代理提供的可选功能，可在任务需要时打开。 哪些系统连接、谁拥有这些系统，以及谁接受这些结果就是项目决策。 查看项目剩余工作。
表单提交 form-submissions
Edge Delivery Services会提供一个表单，但它不会存储提交内容或运行提交后的内容。 在源站点上，服务器处理了每次提交，而页面导入无法看到该服务器。 无论是否迁移，在任何Edge Delivery Services站点上连接目标的工作都是相同的，并且由于代理是通用编码代理，因此您可以随时请求它。
Forms加载项的功能 forms-add-on
表单加载项是为许可Adobe Experience Manager Forms的组织构建的。 它为Experience Manager Forms的Edge Delivery Services准备表单。 对于每个包含两个或更多字段的源表单，它会在表单定义中记录这些字段。表单定义是保存在页面旁边的工作表，每个字段有一行：其名称、标签、类型、选项和验证。 然后，它会在页面上放置一个链接到定义的表单块。 字段和标签是该定义中的内容，而不是表单后端中保存的数据。 每个表单都使用名为form的相同块，其定义决定了它显示的内容，因此代理不会创建该块的变体。 加载项将每个定义保存在页面的文件夹中，该文件夹以源表单命名，因此在其他页面上不会查找相同的表单。 要保持多个页面在一个位置显示的表单，请要求代理将这些页面链接到单个定义。
如果项目还没有表单块，则加载项将添加Experience Manager Forms的表单块。 该块会将每次提交都发送到Forms提交服务，该服务通过表单定义的路径来标识表单，并将数据存储在定义提交行中链接的电子表格中。 该加载项不会链接电子表格，也不会保留源表单提交到的地址，因此会在表单正式启用之前连接目标。 请参阅选择目标。 加载项本身不需要许可证，但表单块和Forms提交服务需要Experience Manager Forms许可证。
如果没有Experience Manager Forms，加载项的字段清点仍然有帮助：它捕获每个表单的字段、标签、类型、选项和验证。 该代理没有适用于其他表单平台的技能，因此应先阅读您平台的文档，如超越Edge Delivery Services的工作中所述。 然后，它可以构建读取相同定义并提交到平台的表单块，或嵌入平台托管的表单。
加载项会读取源服务器从HTML发送的每个表单，包括来自第三方提供商的表单（当该HTML中存在这些表单的字段时）。 脚本在浏览器中添加的表单（例如从营销平台嵌入的表单）不在该HTML中，因此加载项不会导入它。 要求代理重新构建该表单，或再次从您的平台嵌入该表单。
选择目标 form-destination
例如，潜在客户表单属于您的团队已在营销自动化平台或客户关系管理(CRM)系统中处理潜在客户的地方：
- Adobe Marketo Engage
- Salesforce，通过Sales Cloud或Marketing Cloud Account Engagement
- Microsoft Dynamics 365
- HubSpot
- Oracle Eloqua
当提交内容必须到达多个系统时，将它们发送到集成平台，如Adobe Workfront Fusion或Microsoft Power Automate，或发送到您自己的API。 使用Experience Manager Forms时，Forms提交服务会将提交内容存储在一个电子表格中，或通过电子邮件发送这些内容，然后提交在Experience Manager上运行的操作将它们转发到其他系统，如Marketo Engage、Workfront Fusion、Power Automate或REST端点。 请参阅配置提交操作。
其中许多平台在表单端点接受浏览器提交的无需密码的表单。 如果平台的API需要密钥，请按照上述 密钥 中的说明，通过保存该密钥的服务器端服务发送提交内容。
告诉座席：
- 目标：平台以及接收数据的表单、列表或营销活动、其端点和文档或服务器端服务的URL。
- 字段映射：哪个表单字段转到哪个平台字段、哪些字段是必填字段及其格式。
- 隐藏值：访客未输入的值，如潜在客户来源、营销策划、页面URL和访问的UTM参数。
- 同意：选择加入复选框、其批准的措辞以及指向您的隐私政策的链接。
- 垃圾邮件保护：您的平台支持的方法，如CAPTCHA或隐藏的蜜罐字段。
- 提交后：确认消息或感谢页面，以及提交失败时访客看到的内容。
- 测试：测试表单或沙盒，以及如何标记测试条目。
例如：
首先在
https://developer.example.com/forms上阅读我们的CRM有关表单提交的文档。 然后，将/contact上的表单连接到https://forms.example.com/submit/contact-us上的CRM表单contact-us。 将名字、姓氏、电子邮件、公司和国家/地区映射到CRM字段FirstName、LastName、Company和Country；需要电子邮件和公司。 为潜在客户来源“Website”、页面URL和访问的UTM参数添加隐藏字段。 显示此同意复选框，未选中：“我同意通过电子邮件接收产品新闻。” 提交成功后，显示“谢谢，我们将保持联系。”；如果提交失败，则保留访客的条目并显示重试错误。 在https://sandbox.example.com处针对CRM的沙盒进行测试。 请勿上传、推送或发布。
将示例URL、名称和措辞替换为您自己的。
代理将更新表单定义和表单块的代码。 它还可以编写服务器端服务的代码，您的团队将使用该密码进行部署。 在接收平台中，其管理员配置：
- 表单或端点，以及它所需的字段及其验证。
- 允许提交的域：您的预览和实时站点以及您的生产域。
- 在服务器上过滤垃圾邮件。 签入浏览器可帮助访客填写表单；他们不会保护平台。
- 如何将新提交内容与现有联系人匹配，以使一个人不会成为两个潜在客户。
- 潜在客户来源和促销活动归因、评分和路由到适当的销售团队。
- 确认电子邮件、内部通知和后续计划。
- 同意记录，以及个人数据的保留位置和保留时间。
从预览站点提交测试条目。 检查它是否随每个字段一起提供，启动预期的工作流，并标记为测试。 在交换机之后对生产域重复检查。
Commerce 页面 commerce-pages
商业页面加载项扩展了Experience现代化代理的Adobe Commerce商店的页面导入工作流。 它通过信号（如产品结构化数据、URL模式以及页面元素，如数量字段、产品网格或过滤器）来识别源站点上的产品详细信息页面和产品列表页面（无论运行源站点的哪个平台）。 它会将每个模板重建为一个页面，在商业块中仅保存产品的SKU或类别的路径，在标准块中保存周围的内容，例如横幅和促销活动。 产品数据未导入：每次访客打开页面时，商业块都会从目录加载该数据。 代理使用标准工作流迁移其他页面。
加载项不会写入商务块。 它使用项目已具有的产品和列表块，否则，它需要商业店面模板的product-details和product-list-page块。 从该样板启动项目，并将店面连接到您的目录，以便导入的页面在您检查时显示产品。 插件本身不需要许可证，但店面的插件组件需要Adobe Commerce as a Cloud Service或Adobe Commerce Optimizer许可证。 Adobe Commerce Optimizer还可以在另一个commerce平台处理购物车、结帐和订单时提供目录。 查看后端选项。
对于另一个没有Adobe Commerce Optimizer的Commerce平台，加载项不适用。 代理将生成产品和列表块，这些区块从平台的API加载其数据，并按照超越Edge Delivery Services中的描述使用平台的文档。
加载项适用于基于文档的内容。 对于使用Experience Manager创作的项目，代理将使用标准迁移，这会导入每个产品页面当前显示的内容。 与您的团队一起决定这些页面如何连接到目录。
验证并交付 validation
使用项目声明的lint和测试命令，以及对实际内容的浏览器检查。 要求代理报告命令和结果，而不仅仅是它测试的结果。
检查：
- 所有受影响的变量和内容边缘案例。
- 桌面/移动设备布局、长内容和图像行为。
- 键盘访问、焦点、语义、标签和阅读顺序。
- 现有的交互和集成。
- 当模型或内容发生更改时，作者可以在编辑器中编辑、保存和重新打开内容，并且内容可以正确预览。
- 相关的性能检查且没有新的浏览器错误。
如果检查失败，请保留失败的示例并修复最小的受影响层。 将过时的预览/代码分支问题与模型或实施失败区分开来。 重新运行失败检查和相关回归。
查看差异，仅暂存目标文件，并推送存储库策略。 仅在获得授权时才上传测试或生产内容；代码推送不会保存它。 合并到main后，块代码将应用于实时网站上使用该块的每个页面；请参阅更改如何上线。
要进行恢复，请通过Git还原代码，然后单独还原更改的远程内容。 保留兼容的旧示例，直到接受任何所需的内容迁移。
使用项目切换保留更改的文件、模型、示例、验证结果、剩余风险以及下一个人员或代理的恢复方法。