SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场Using the Block Collection and Block Party

Using the Block Collection and Block Party

前端与建站

查看项目

更新于 10-15 17:59

技能介绍

用途

本技能用于在构建 AEM Edge Delivery 站点时，从 Block Collection 与 Block Party 两个资源中查找现有区块、代码示例、集成模式与工具的参考实现，从而为开发者自己的实现提供依据。

主要能力

它覆盖两个来源：

  • Block Collection：由 Adobe 维护的参考区块，遵循最佳实践，具备良好的内容建模、性能与无障碍标准，但仅限常用区块。文档地址为 https://www.aem.live/developer/block-collection，仓库为 https://github.com/adobe/aem-block-collection，在线示例为 https://main--aem-block-collection--adobe.aem.live。
  • Block Party：社区驱动的贡献集合，内容类型更广，包含实验性/创新性做法以及区块、插件、构建工具与集成等。只有已批准的条目会被搜索脚本返回。文档地址为 https://www.aem.live/developer/block-party/，搜索索引为 https://www.aem.live/developer/block-party/block-party.json?sheet=curated-list-new。

选择偏好：标准区块（轮播、手风琴、卡片等）优先从 Block Collection 查找；Block Collection 没有所需内容时使用 Block Party；sidekick 插件、构建工具与集成仅存在于 Block Party。

使用方式

  1. 确定搜索词：考虑功能的同义词或替代名称，例如 FAQ 对应 accordion，图片画廊对应 gallery、carousel、slideshow，导航对应 navigation、menu、header，构建工具对应 webpack、vite、sass、typescript。避免过于宽泛（content、page、website）或过于具体（my-custom-carousel-with-auto-play）的词。

  2. 搜索 Block Collection：建议并行运行两个脚本以获得全面结果：

node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js <search-term> & \
node .claude/skills/block-collection-and-party/scripts/search-block-collection.js <search-term> & \
wait

其中 search-block-collection-github.js 通过 GitHub API 搜索实际仓库文件夹（最全面），search-block-collection.js 搜索导航页面（提供显示名称并覆盖边缘情况）。若并行运行有问题，优先使用 GitHub API 版本。

  1. 搜索 Block Party：在项目根目录执行：
node .claude/skills/block-collection-and-party/scripts/search-block-party.js [--category <category>] <search-term> [additional-terms...]

--category <category> 可按类别过滤（Block、Sidekick Plugin、DA Plugin、Code Snippet、Build Tooling 等）；不加则搜索所有类别。

  1. 查看搜索结果：Block Collection 结果可能为 type block（提供 name、displayName、liveExampleUrl、jsUrl、cssUrl）或 type default-content（属于默认内容文档，代码可能位于其他区块中，例如面包屑位于 header 区块内，提供 liveExampleUrl 与 documentationUrl）。Block Party 结果提供 title、category、description、githubUrl、showcaseUrl、githubProfile 等字段。

  2. 获取区块结构示例（生成 HTML 时的关键步骤）：在编写任何区块 HTML 之前，先运行：

node .claude/skills/block-collection-and-party/scripts/get-block-structure.js <block-name>

输出包含区块描述与源码 URL、所有变体名称、每个变体的预装饰 HTML（简化版）、结构分析（行、列及各列内容类型）。这能展示区块在 JavaScript 装饰之前期望的确切 HTML 结构，揭示行列模式与多种变体，避免因 HTML 结构错误导致区块装饰失败。

  1. 查看代码：对 Block Collection 中 type 为 block 的结果，先获取结构示例，再阅读 JS 了解装饰逻辑、阅读 CSS 了解样式策略，并访问在线示例；对 default-content 类型，访问文档与在线示例，并在仓库中搜索可能包含实现的相关区块；对 Block Party 条目，访问 GitHub 查看代码、访问 showcase 查看效果。

  2. 应用所学：理解内容模型、研究装饰模式与 CSS 架构，并加以改编而非直接复制，同时遵循项目自身的编码规范。

适用场景

  • 构建新区块前，查看是否已有相似实现
  • 寻找解决特定问题的代码模式或片段
  • 搜索集成示例（如第三方服务、构建工具）
  • 需要 sidekick 或 Document Authoring 插件的参考实现
  • 通过可运行的示例理解最佳实践

限制与不适用情况

  • 需要官方文档时，应使用 docs-search，而非本技能
  • 仅对现有代码做小幅 CSS 调整时，直接编辑即可
  • 已经明确知道需要哪个区块/示例时，直接使用即可

搜索行为方面：Block Collection 搜索匹配 GitHub 仓库中的区块文件夹名，返回精确与部分匹配（不区分大小写），快速可靠，但限于约 16 个区块；Block Party 搜索标题、描述与类别字段，支持类别过滤，返回所有匹配项并显示每条目的批准状态，内容类型更为多样。

使用提醒：始终搜索替代名称；有 Block Collection 可用时优先使用；Block Party 用于特殊需求但需要更多评估；不要盲目复制而应理解并改编；仔细审查内容模型；检查无障碍与性能（尤其是 Block Party 代码）；两个资源都搜索；了解类型时对 Block Party 使用类别过滤。