# 使用块集合和块方 ## 概述此技能可帮助您从两个关键的 AEM Edge Delivery 资源中找到参考实现、代码示例和模式： * **块集合**：Adobe 维护的参考块遵循最佳实践 * **Block Party**：社区驱动的块、插件、工具和集成存储库使用提供的搜索脚本来发现相关示例，然后查看代码以了解您的实施方法。 ## 何时使用此技能在以下情况下使用此技能： * 构建一个新块并想看看是否存在类似的实现 * 寻找代码模式或片段来解决特定问题 * 搜索集成示例（例如第三方服务、构建工具） * 需要 sidekick 或文档创作插件的参考实现 * 希望通过工作示例了解最佳实践 **请勿在以下情况下使用此技能：** * 你需要官方文档（使用 `docs-search` 代替） * 您正在对现有代码进行较小的 CSS 调整（只需直接编辑） * 你已经确切知道你需要哪个块/示例（直接使用它） ## 相关技能 * **building-blocks** ：该技能在开发过程中从 Building-block 中调用 * **docs-search** ：用于官方 aem.live 文档 * **内容驱动开发** ：在为块创建内容模型时使用 ## 关键概念 ### Block Collection 与 Block Party **块集合**（如果可用，请首选此） * 由 Adobe 维护 * 经过最佳实践审查 * 优秀的内容建模 * 高性能和可访问性标准 * 仅限于常用的块 * 文档： * 存储库： * 实时站点： **区块派对**（用于特殊需求） * 社区驱动的贡献 * 更广泛的内容类型 * 包括实验/创新方法 * 搜索脚本仅返回批准的条目 * 包含块、插件、构建工具、集成等 * 文档： * 搜索索引： **何时选择哪个：** * 从标准块的块集合开始（旋转木马、手风琴、卡片等） * 当Block Collection没有你需要的东西时使用Block Party * Block Party 是 sidekick 插件、构建工具和集成的唯一来源 * 有时，即使 Block Collection 有类似的区块，Block Party 也有值得考虑的创新方法 ## 如何使用此技能 ### 第 1 步：识别搜索词确定您要查找的内容并确定相关的搜索词。 **考虑功能的相似或替代名称**。 **示例：** * 寻找常见问题解答块→搜索“常见问题解答”和“手风琴”（块集合有手风琴） * 寻找图片库 → 搜索“图库”、“轮播”、“幻灯片” * 寻找导航 → 搜索“导航”、“菜单”、“标题” * 寻找构建工具 → 搜索“webpack”、“vite”、“sass”、“typescript” **好的搜索条件：** * 具体功能名称：“carousel”、“tabs”、“modal” * 工具名称：“sass”、“webpack”、“target” * 组件类型：“导航”、“页脚”、“英雄” **不良搜索词：** * 太笼统：“内容”、“页面”、“网站” * 太具体：“my-custom-carousel-with-auto-play” ### 第 2 步：搜索块集合 **重要：** 并行运行两个搜索脚本以获得全面的结果： # 并行运行两个搜索（首选方法）节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js & \ 等待 **为什么使用这两个脚本：** * `search-block-collection-github.js` \- 通过 GitHub API 搜索实际的存储库文件夹（最全面） * `search-block-collection.js` \- 搜索导航页面（提供显示名称并捕获边缘情况） *同时运行这两种方法可确保最大覆盖范围并捕获单独使用任一方法可能错过的块 **示例：** # 搜索 Accordion/FAQ 块（两个脚本）节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 手风琴 & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js 手风琴 & \ 等待 # 搜索嵌入块（两个脚本）节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 嵌入 & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js 嵌入 & \ 等待 # 如果运行两者都有问题，请优先考虑 GitHub API 版本节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 轮播 ### 第 3 步：搜索区块派对从项目根目录执行 Block Party 搜索脚本：节点 .claude/skills/block-collection-and-party/scripts/search-block-party.js [--category <类别>] <搜索术语> [附加术语...] **选项：** * `--category `：按特定类别过滤（块、Sidekick 插件、DA 插件、代码片段、构建工具等） * 不带 `--category`: 搜索所有类别 **示例：** # 搜索面包屑块节点 .claude/skills/block-collection-and-party/scripts/search-block-party.js 面包屑 # 搜索 Sass 集成示例节点.claude/skills/block-collection-and-party/scripts/search-block-party.js sass # 仅搜索构建工具 node .claude/skills/block-collection-and-party/scripts/search-block-party.js --category“构建工具”webpack # 多词搜索节点 .claude/skills/block-collection-and-party/scripts/search-block-party.js adobe 目标集成 ### 第 4 步：查看搜索结果 **块收集结果（类型：“块”）：** { “查询”：“手风琴”， “来源”：“Adobe AEM Block Collection”， “总项目”：26， “匹配数”：1， “结果”：[ { “名称”：“手风琴”， "displayName": "手风琴", “类型”：“块”， "liveExampleUrl": "https://main--aem-block-collection--adobe.aem.live/block-collection/accordion", "jsUrl": "https://github.com/adobe/aem-block-collection/blob/main/blocks/accordion/accordion.js", “cssUrl”：“https://github.com/adobe/aem-block-collection/blob/main/blocks/accordion/accordion.css” } ] } **块集合结果（类型：“默认内容”）：** { “查询”：“面包屑”， “来源”：“Adobe AEM Block Collection”， “总项目”：26， “匹配数”：1， “结果”：[ { “名称”：“面包屑”， "displayName": "面包屑", “类型”：“默认内容”， "liveExampleUrl": "https://main--aem-block-collection--adobe.aem.live/block-collection/breadcrumbs", "note": "这是默认内容文档，而不是独立块。代码可能是其他块的一部分（例如，面包屑位于标题块中）。请访问 https://www.aem.live/developer/block-collection 和实时示例 URL 以获取实施指南。", “documentationUrl”：“https://www.aem.live/developer/block-collection” } ] } **区块派对结果：** { “查询”：“面包屑”， "category": "所有类别", "source": "AEM Block Party（仅批准）", “总条目”：90， “批准的条目”：62， “匹配数”：1， “结果”：[ { "title": "面包屑", "类别": "块", "description": "面包屑导航组件...", "githubUrl": "https://github.com/...", "showcaseUrl": "https://...", "githubProfile": "https://github.com/..." } ] } ### 步骤 5：获取块结构示例（对于 HTML 生成至关重要） **重要：** 在为块编写任何 HTML 之前，始终首先获取预装饰结构示例。节点 .claude/skills/block-collection-and-party/scripts/get-block-struct.js <块名称> **为什么这很重要：** * 在 JavaScript 修饰之前显示块期望的确切 HTML 结构 * 显示行/列模式（例如，每张卡片都是一行，有 2 列：图像 | 内容） * 显示多种变体（例如，“卡片”与“卡片（无图像）”） * 防止HTML结构错误导致块装饰失败 **示例：** # 获取手风琴结构节点 .claude/skills/block-collection-and-party/scripts/get-block-struct.js 手风琴 # 获取卡片结构（将显示多种变体）节点 .claude/skills/block-collection-and-party/scripts/get-block-struct.js 卡 # 获取选项卡结构节点 .claude/skills/block-collection-and-party/scripts/get-block-struct.js 选项卡 **输出包括：** * 区块描述和源代码URL * 所有可用的变体及其名称 * 每个变体的预装饰 HTML（简化，无图像优化噪声） * 结构分析（行、列、每列的内容类型） **何时使用：** * ✅ 在生成用于页面迁移的 HTML 之前 * ✅ 在 HTML 文件中写入块内容之前 * ✅ 当块装饰失败时（验证您的 HTML 与预期结构匹配） * ✅ 当不确定内容模型时（例如，“每张卡片是一行还是所有卡片都在一行？”） **此步骤可以防止最常见的错误：** 编写不正确的 HTML 结构，该结构与块的 JavaScript 装饰所期望的不匹配。 ### 第 6 步：检查代码使用提供的 URL 查看实施情况： **对于带有`type: "block"`的块集合结果：** 1. **首先：** 获取块结构示例（步骤 5）以理解预期的 HTML 2.阅读JS文件，了解装饰逻辑 3.阅读CSS文件查看样式方法 4. 访问实时示例 URL 以查看正在运行的块 **对于具有`type: "default-content"`的块集合结果：** 1. 这些代表标准 HTML 元素和模式（面包屑、按钮、标题等） 2. 代码存在，但可能是其他块的一部分（例如，面包屑代码位于标头块中） 3.访问“documentationUrl”()查找实现细节 4.访问“liveExampleUrl”查看示例并了解如何创作内容 5. 在块集合存储库中搜索可能包含实现的相关块 **对于区块党参赛作品：** 1.访问GitHub URL查看代码 2. 访问展示 URL 以查看其实际效果（如果有） 3. 查看描述以了解目的和方法 ### 第 7 步：应用所学知识使用参考实现来告知您的方法： * 了解所使用的内容模型 * 学习装饰图案和技巧 * 回顾 CSS 架构和响应式方法 * 调整（不要复制）代码以满足您的特定需求 * 确保遵循项目的编码标准 ## 搜索行为详细信息 ### 块集合搜索 * 在 GitHub 存储库中搜索块文件夹名称 * 返回完全匹配和部分匹配（不区分大小写） * 提供 JS、CSS 和实例的直接链接 * 快速且可靠（仅限约 16 个区块） ### 区块派对搜索 * 搜索标题、描述和类别字段 * 支持类别过滤 * 返回所有匹配的条目（不限于） * 显示每个条目的批准状态 * 包括块以外的多种内容类型 ## 示例 ### 示例 1：构建常见问题解答块 **用户请求：**“我需要建立一个包含可扩展问题的常见问题解答部分” **好方法：** 1. 认识常见问题解答经常使用手风琴模式 2. 使用两个脚本搜索块集合：节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 手风琴 & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js 手风琴 & \ 等待 3. 查看两次搜索的结果（它们应该对齐，但同时运行两者可确保不会遗漏任何内容） 4. 找到包含 JS、CSS 和实例 URL 的折叠块 5. 审查实施方法 6. 根据您的特定常见问题解答需求调整模式 **为什么这有效：** * 使用替代术语“手风琴”代替“常见问题解答” * 从 Block Collection 开始（Adobe 最佳实践） * 运行两个搜索脚本以实现全面覆盖 * 找到了一个经过审查的、可访问的、高性能的实现 ### 示例 2：查找面包屑导航实施 **用户请求：**“向网站添加面包屑导航” **好方法：** 1. 首先使用两个脚本搜索块集合：节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 面包屑 & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js 面包屑 & \ 等待 2.发现面包屑是“default-content”（不是独立的块） 3. 搜索区块方：`node .claude/skills/block-collection-and-party/scripts/search-block-party.js breadcrumb` 4.在Block Party中找到面包屑块 5. 审查实施情况，注意到它是社区贡献的 6.评估它是否满足您的需求或需要适应 **为什么这有效：** * 首先使用两个脚本检查块集合（最佳实践） * 发现的面包屑存在于块集合中，但作为默认内容（标题块的一部分） * 退回到 Block Party 进行独立实现 * 意识到 Block Party 代码可能需要更多审查 ### 示例 3：集成 Sass **用户请求：**“我们可以使用 Sass 作为样式而不是纯 CSS 吗？” **好方法：** 1. 认识到这是一个构建工具问题（而不是一个块） 2.跳过块收集（没有构建工具） 3. 搜索区块方：`node .claude/skills/block-collection-and-party/scripts/search-block-party.js --category "Build Tooling" sass` 4. 查找 Sass 集成示例 5. 检查方法并适应您的项目 **为什么这有效：** * 公认的 Block Party 是构建工具的正确资源 * 使用类别过滤器来缩小结果范围 * 找到集成的社区示例 ### 示例 4：存在多种实现 **用户请求：**“为产品图像构建轮播” **场景：** Block Collection和Block Party都有轮播实现 **好方法：** 1. 使用两个脚本搜索块集合：节点 .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js 轮播 & \ 节点 .claude/skills/block-collection-and-party/scripts/search-block-collection.js 轮播 & \ 等待 2.从两个搜索结果中找到Block Collection轮播 3.同时搜索Block Party：`node .claude/skills/block-collection-and-party/scripts/search-block-party.js carousel` 4. 找到多个 Block Party 轮播 5. **首选块收集**以获得最佳实践 6. 查看 Block Party 版本，看看它们是否具有值得考虑的创新功能 7. 根据要求做出明智的决定 **为什么这有效：** * 搜索包含两个脚本的块集合以获得全面的覆盖范围 * 搜索 Block Party 查看所有选项 * 默认为块集合（Adobe 审查） * 考虑区块方的潜在创新 * 做出明智的决定而不是盲目模仿 ## 重要提醒 1. **始终搜索替代名称** \- "FAQ" = "accordion", "slideshow" = "carousel" 2. **首选 Block Collection（如果可用）** \- 经过质量和最佳实践审查 3. **使用 Block Party 来满足特殊需求** \-它的种类更广泛，但需要更多评估 4. **不要盲目复制** \-理解代码并使其适应你的项目 5. **仔细审查内容模型** \-作者如何构建内容至关重要 6. **检查可访问性和性能** \- 特别是对于 Block Party 代码 7. **搜索这两种资源** \-有时两者都有不同权衡的实现 8. **类别对于 Block Party 很重要** \- 当您知道需要什么类型时使用过滤器 ## 常见搜索模式需要|块集合搜索 |区块党搜索 ---|---|--- 常见问题解答部分 | `手风琴` | `常见问题解答`、`手风琴` 图片库| `轮播` | `画廊`、`轮播`、`幻灯片` 选项卡内容 | `选项卡` | “选项卡”、“选项卡式” 导航 | `标题` | `导航`、`菜单`、`标题` 页脚| `页脚` | `页脚` 产品卡| `卡片` | “卡片”、“产品” 视频嵌入 | `视频`、`嵌入` | `视频`、`嵌入`、`youtube` 构建工具 |不适用 |使用`--category“构建工具”` 助手插件 |不适用 |使用 `--category "Sidekick Plugin"` 集成 |不适用 |搜索服务名称（例如“target”、“analytics”） ## 故障排除 **两个块收集脚本都没有结果：** * 运行两个脚本可确保全面覆盖 * 如果两个脚本都没有返回结果，则该块可能不存在于块集合中 * 尝试其他搜索词（例如“嵌入”与“视频”、“常见问题解答”与“手风琴”） * 退回到 Block Party 搜索 * 如果用户坚持该块存在，请使用 WebFetch 手动检查： * `https://github.com/adobe/aem-block-collection/tree/main/blocks` * 考虑在“构建块”技能的指导下从头开始构建 **两个脚本之间的不同结果：** * 这是正常的 - GitHub API 脚本搜索文件夹名称，nav 脚本搜索导航 * 两个结果均有效 - 查看两个结果以确保您没有错过任何内容 * 如果存在差异，首选 GitHub API 结果（更直接） **重要 - 当搜索未返回结果但可能存在阻止时：** * 不要立即接受“无结果”作为最终结果 * 运行这两个脚本可以最大限度地提高找到现有块的机会 * 如果用户建议应该存在一个块，请进一步调查 * 可能存在的常见块：嵌入、视频、表单、同意管理 * 使用WebFetch手动浏览GitHub仓库 * 与您已知存在的块进行交叉引用（如视频、手风琴、轮播） **街区聚会结果太多：** * 使用`--category`进行过滤 * 优化搜索条件，使其更加具体 * 查看描述以找到最佳匹配 **找到代码，但似乎已过时：** * 检查块集合是否有更新的模式 * 使用“文档搜索”技能查看官方文档 * 考虑使用作为灵感但采用现代方法实施 **多种实现，不确定使用哪个：** * 更喜欢 Block Collection 以获得标准功能 * 选择 Block Party 以获得专业或创新功能 * 考虑您的具体要求（性能、可访问性、功能） * 在决定之前检查代码质量和文档

使用 Block Collection 和 Block Party

包含技能