block-collection-and-party

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Using the Block Collection and Block Party

使用 Block Collection 和 Block Party

Overview

概述

This skill helps you find reference implementations, code examples, and patterns from two key AEM Edge Delivery resources:

Block Collection: Adobe-maintained reference blocks following best practices
Block Party: Community-driven repository of blocks, plugins, tools, and integrations

Use the provided search scripts to discover relevant examples, then review the code to inform your implementation approach.

本技能可帮助你从两个关键的 AEM Edge Delivery 资源中查找参考实现、代码示例和模式：

Block Collection：由 Adobe 维护的参考块，遵循最佳实践
Block Party：由社区驱动的块、插件、工具和集成资源库

使用提供的搜索脚本发现相关示例，然后参考代码来指导你的实现方案。

When to Use This Skill

何时使用本技能

Use this skill when:

Building a new block and want to see if similar implementations exist
Looking for code patterns or snippets to solve a specific problem
Searching for integration examples (e.g., third-party services, build tools)
Need reference implementations for sidekick or Document Authoring plugins
Want to understand best practices through working examples

Do NOT use this skill when:

You need official documentation (use
```
docs-search
```
instead)
You're making minor CSS tweaks to existing code (just edit directly)
You already know exactly which block/example you need (use it directly)

在以下场景中使用本技能：

构建新块时，希望查看是否存在类似的实现
寻找代码模式或片段来解决特定问题
搜索集成示例（如第三方服务、构建工具）
需要 Sidekick 或 Document Authoring 插件的参考实现
希望通过可运行的示例了解最佳实践

请勿在以下场景使用本技能：

需要官方文档时（请使用
```
docs-search
```
技能）
仅需对现有代码进行微小 CSS 调整时（直接编辑即可）
已经明确知道需要使用哪个块/示例时（直接使用即可）

Related Skills

Key Concepts

核心概念

Block Collection vs Block Party

Block Collection 与 Block Party 对比

Block Collection (Prefer this when available)

Maintained by Adobe
Vetted for best practices
Excellent content modeling
High performance and accessibility standards
Limited to commonly-needed blocks
Documentation: https://www.aem.live/developer/block-collection
Repository: https://github.com/adobe/aem-block-collection
Live site: https://main--aem-block-collection--adobe.aem.live

Block Party (Use for specialized needs)

Community-driven contributions
Broader variety of content types
Includes experimental/innovative approaches
Only approved entries are returned by the search script
Contains blocks, plugins, build tools, integrations, and more
Documentation: https://www.aem.live/developer/block-party/
Search index: https://www.aem.live/developer/block-party/block-party.json?sheet=curated-list-new

When to prefer which:

Start with Block Collection for standard blocks (carousels, accordions, cards, etc.)
Use Block Party when Block Collection doesn't have what you need
Block Party is the only source for sidekick plugins, build tools, and integrations
Sometimes Block Party has innovative approaches worth considering even if Block Collection has a similar block

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 中找到
即使 Block Collection 有类似块，Block Party 可能也有值得参考的创新方案

How to Use This Skill

如何使用本技能

Step 1: Identify Search Terms

步骤 1：确定搜索关键词

Determine what you're looking for and identify relevant search terms. Think about similar or alternative names for the functionality.

Examples:

Looking for FAQ block → search for "faq" AND "accordion" (Block Collection has accordion)
Looking for image gallery → search for "gallery", "carousel", "slideshow"
Looking for navigation → search for "navigation", "menu", "header"
Looking for build tooling → search for "webpack", "vite", "sass", "typescript"

Good search terms:

Specific functionality names: "carousel", "tabs", "modal"
Tool names: "sass", "webpack", "target"
Component types: "navigation", "footer", "hero"

Poor search terms:

Too generic: "content", "page", "website"
Too specific: "my-custom-carousel-with-auto-play"

明确你的需求，确定相关的搜索关键词。请考虑功能的同义词或替代名称。

示例：

寻找 FAQ 块 → 搜索 "faq" 和 "accordion"（Block Collection 有手风琴块）
寻找图片画廊 → 搜索 "gallery"、"carousel"、"slideshow"
寻找导航组件 → 搜索 "navigation"、"menu"、"header"
寻找构建工具 → 搜索 "webpack"、"vite"、"sass"、"typescript"

优质搜索关键词：

具体功能名称："carousel"、"tabs"、"modal"
工具名称："sass"、"webpack"、"target"
组件类型："navigation"、"footer"、"hero"

劣质搜索关键词：

过于通用："content"、"page"、"website"
过于具体："my-custom-carousel-with-auto-play"

Step 2: Search Block Collection

步骤 2：搜索 Block Collection

IMPORTANT: Run BOTH search scripts in parallel for comprehensive results:

bash

undefined

重要提示： 请并行运行两个搜索脚本以获得全面结果：

bash

undefined

Run both searches in parallel (preferred approach)

并行运行两个搜索（推荐方式）

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


**Why use both scripts:**
- `search-block-collection-github.js` - Searches actual repository folders via GitHub API (most comprehensive)
- `search-block-collection.js` - Searches navigation page (provides display names and catches edge cases)
- Running both ensures maximum coverage and catches blocks that might be missed by either approach alone

**Examples:**
```bash


**为何使用两个脚本：**
- `search-block-collection-github.js` - 通过 GitHub API 搜索实际代码库文件夹（最全面）
- `search-block-collection.js` - 搜索导航页面（提供显示名称并捕获边缘情况）
- 同时运行可确保覆盖范围最大化，避免遗漏任一脚本可能错过的块

**示例：**
```bash

Search for accordion/FAQ blocks (both scripts)

搜索手风琴/FAQ 块（两个脚本）

node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js accordion &
node .claude/skills/block-collection-and-party/scripts/search-block-collection.js accordion &
wait

Search for embed block (both scripts)

搜索嵌入块（两个脚本）

node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js embed &
node .claude/skills/block-collection-and-party/scripts/search-block-collection.js embed &
wait

If running both is problematic, prioritize the GitHub API version

如果无法同时运行，优先使用 GitHub API 版本

node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js carousel

undefined

node .claude/skills/block-collection-and-party/scripts/search-block-collection-github.js carousel

undefined

Step 3: Search Block Party

步骤 3：搜索 Block Party

Execute the Block Party search script from the project root:

bash

node .claude/skills/block-collection-and-party/scripts/search-block-party.js [--category <category>] <search-term> [additional-terms...]

Options:

```
--category <category>
```
: Filter by specific category (Block, Sidekick Plugin, DA Plugin, Code Snippet, Build Tooling, etc.)
Without
```
--category
```
: Searches all categories

Examples:

bash

undefined

从项目根目录执行 Block Party 搜索脚本：

bash

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 等）
不使用
```
--category
```
：搜索所有类别

示例：

bash

undefined

Search for breadcrumb blocks

搜索面包屑块

node .claude/skills/block-collection-and-party/scripts/search-block-party.js breadcrumb

Search for Sass integration examples

搜索 Sass 集成示例

node .claude/skills/block-collection-and-party/scripts/search-block-party.js sass

Search only for build tooling

仅搜索构建工具

node .claude/skills/block-collection-and-party/scripts/search-block-party.js --category "Build Tooling" webpack

Multi-word search

多词搜索

node .claude/skills/block-collection-and-party/scripts/search-block-party.js adobe target integration

undefined

node .claude/skills/block-collection-and-party/scripts/search-block-party.js adobe target integration

undefined

Step 4: Review Search Results

步骤 4：查看搜索结果

Block Collection Results (type: "block"):

json

{
  "query": "accordion",
  "source": "Adobe AEM Block Collection",
  "totalItems": 26,
  "matchCount": 1,
  "results": [
    {
      "name": "accordion",
      "displayName": "Accordion",
      "type": "block",
      "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"
    }
  ]
}

Block Collection Results (type: "default-content"):

json

{
  "query": "breadcrumb",
  "source": "Adobe AEM Block Collection",
  "totalItems": 26,
  "matchCount": 1,
  "results": [
    {
      "name": "breadcrumbs",
      "displayName": "Breadcrumbs",
      "type": "default-content",
      "liveExampleUrl": "https://main--aem-block-collection--adobe.aem.live/block-collection/breadcrumbs",
      "note": "This is default content documentation, not a standalone block. Code may be part of other blocks (e.g., breadcrumbs are in the header block). Visit https://www.aem.live/developer/block-collection and the live example URL for implementation guidance.",
      "documentationUrl": "https://www.aem.live/developer/block-collection"
    }
  ]
}

Block Party Results:

json

{
  "query": "breadcrumb",
  "category": "All categories",
  "source": "AEM Block Party (Approved Only)",
  "totalEntries": 90,
  "approvedEntries": 62,
  "matchCount": 1,
  "results": [
    {
      "title": "Breadcrumbs",
      "category": "Block",
      "description": "A breadcrumb navigation component...",
      "githubUrl": "https://github.com/...",
      "showcaseUrl": "https://...",
      "githubProfile": "https://github.com/..."
    }
  ]
}

Block Collection 结果（类型："block"）：

json

{
  "query": "accordion",
  "source": "Adobe AEM Block Collection",
  "totalItems": 26,
  "matchCount": 1,
  "results": [
    {
      "name": "accordion",
      "displayName": "Accordion",
      "type": "block",
      "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"
    }
  ]
}

Block Collection 结果（类型："default-content"）：

json

{
  "query": "breadcrumb",
  "source": "Adobe AEM Block Collection",
  "totalItems": 26,
  "matchCount": 1,
  "results": [
    {
      "name": "breadcrumbs",
      "displayName": "Breadcrumbs",
      "type": "default-content",
      "liveExampleUrl": "https://main--aem-block-collection--adobe.aem.live/block-collection/breadcrumbs",
      "note": "This is default content documentation, not a standalone block. Code may be part of other blocks (e.g., breadcrumbs are in the header block). Visit https://www.aem.live/developer/block-collection and the live example URL for implementation guidance.",
      "documentationUrl": "https://www.aem.live/developer/block-collection"
    }
  ]
}

Block Party 结果：

json

{
  "query": "breadcrumb",
  "category": "All categories",
  "source": "AEM Block Party (Approved Only)",
  "totalEntries": 90,
  "approvedEntries": 62,
  "matchCount": 1,
  "results": [
    {
      "title": "Breadcrumbs",
      "category": "Block",
      "description": "A breadcrumb navigation component...",
      "githubUrl": "https://github.com/...",
      "showcaseUrl": "https://...",
      "githubProfile": "https://github.com/..."
    }
  ]
}

Step 5: Get Block Structure Examples (CRITICAL for HTML generation)

步骤 5：获取块结构示例（HTML 生成的关键步骤）

IMPORTANT: Before writing any HTML for a block, ALWAYS fetch the pre-decoration structure examples first.

bash

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

Why this is critical:

Shows the exact HTML structure the block expects BEFORE JavaScript decoration
Reveals the row/column pattern (e.g., each card is a row with 2 columns: image | content)
Displays multiple variants (e.g., "Cards" vs "Cards (no images)")
Prevents HTML structure mistakes that cause blocks to fail decoration

Examples:

bash

undefined

重要提示： 在编写任何块的 HTML 代码之前，务必先获取预装饰结构示例。

bash

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

为何此步骤至关重要：

展示块在 JavaScript 装饰之前所需的精确 HTML 结构
揭示行/列模式（例如，每个卡片是包含 2 列的行：图片 | 内容）
显示多种变体（例如，"Cards" vs "Cards (no images)"）
避免因 HTML 结构错误导致块装饰失败

示例：

bash

undefined

Get accordion structure

获取手风琴结构

node .claude/skills/block-collection-and-party/scripts/get-block-structure.js accordion

Get cards structure (will show multiple variants)

获取卡片结构（将显示多种变体）

node .claude/skills/block-collection-and-party/scripts/get-block-structure.js cards

Get tabs structure

获取标签页结构

node .claude/skills/block-collection-and-party/scripts/get-block-structure.js tabs


**Output includes:**
- Block description and source code URL
- All available variants with their names
- Pre-decoration HTML for each variant (simplified, without image optimization noise)
- Structural analysis (rows, columns, content types per column)

**When to use:**
- ✅ Before generating HTML for page migration
- ✅ Before writing block content in HTML files
- ✅ When block decoration is failing (verify your HTML matches expected structure)
- ✅ When uncertain about content model (e.g., "Is each card a row or all cards in one row?")

**This step prevents the most common mistake:** Writing incorrect HTML structure that doesn't match what the block's JavaScript decoration expects.

node .claude/skills/block-collection-and-party/scripts/get-block-structure.js tabs


**输出内容包括：**
- 块描述和源代码 URL
- 所有可用变体及其名称
- 每个变体的预装饰 HTML（简化版，不含图片优化相关代码）
- 结构分析（行、列、每列的内容类型）

**适用场景：**
- ✅ 页面迁移生成 HTML 之前
- ✅ 在 HTML 文件中编写块内容之前
- ✅ 块装饰失败时（验证你的 HTML 是否与预期结构匹配）
- ✅ 对内容模型不确定时（例如，"每个卡片是单独一行还是所有卡片在同一行？"）

**此步骤可避免最常见的错误：** 编写不符合块 JavaScript 装饰预期的错误 HTML 结构。

Step 6: Examine the Code

步骤 6：检查代码

Use the provided URLs to review the implementation:

For Block Collection results with
type: "block"
:

FIRST: Get block structure examples (Step 5) to understand the expected HTML
Read the JS file to understand decoration logic
Read the CSS file to see styling approach
Visit the live example URL to see the block in action

For Block Collection results with
type: "default-content"
:

These represent standard HTML elements and patterns (breadcrumbs, buttons, headings, etc.)
Code exists but may be part of other blocks (e.g., breadcrumbs code is in the header block)
Visit the
```
documentationUrl
```
(https://www.aem.live/developer/block-collection) to find implementation details
Visit the
```
liveExampleUrl
```
to see examples and understand how to author the content
Search the Block Collection repository for related blocks that might contain the implementation

For Block Party entries:

Visit the GitHub URL to see the code
Visit the showcase URL to see it in action (if available)
Review the description to understand the purpose and approach

使用提供的 URL 查看实现细节：

对于 Block Collection 中类型为 "block" 的结果：

首先： 获取块结构示例（步骤 5）以了解预期的 HTML 结构
阅读 JS 文件以理解装饰逻辑
阅读 CSS 文件以了解样式实现方式
访问演示站点 URL 查看块的实际效果

对于 Block Collection 中类型为 "default-content" 的结果：

这些代表标准 HTML 元素和模式（面包屑、按钮、标题等）
代码存在但可能属于其他块（例如，面包屑代码在头部块中）
访问
```
documentationUrl
```
（https://www.aem.live/developer/block-collection）查找实现细节
访问
```
liveExampleUrl
```
查看示例并了解如何创作内容
在 Block Collection 代码库中搜索可能包含该实现的相关块

对于 Block Party 条目：

访问 GitHub URL 查看代码
访问展示站点 URL 查看实际效果（如果有）
阅读描述以了解其用途和实现思路

Step 7: Apply Learnings

步骤 7：应用所学内容

Use the reference implementations to inform your approach:

Understand the content model used
Study decoration patterns and techniques
Review CSS architecture and responsive approaches
Adapt (don't copy) the code to fit your specific needs
Ensure you follow your project's coding standards

使用参考实现来指导你的开发：

理解所使用的内容模型
学习装饰模式和技术
审查 CSS 架构和响应式实现方式
根据你的具体需求调整（而非复制）代码
确保符合项目的编码标准

Search Behavior Details

搜索行为细节

Block Collection Search

Block Collection 搜索

Searches block folder names in the GitHub repository
Returns exact and partial matches (case-insensitive)
Provides direct links to JS, CSS, and live examples
Fast and reliable (limited to ~16 blocks)

搜索 GitHub 代码库中的块文件夹名称
返回精确和部分匹配（不区分大小写）
提供直接指向 JS、CSS 和演示示例的链接
快速可靠（仅包含约 16 个块）

Block Party Search

Block Party 搜索

Searches title, description, and category fields
Supports category filtering
Returns all matching entries (not limited)
Shows approval status for each entry
Includes diverse content types beyond blocks

搜索标题、描述和类别字段
支持类别筛选
返回所有匹配条目（无数量限制）
显示每个条目的审核状态
包含块之外的多种内容类型

Examples

示例

Example 1: Building an FAQ Block

示例 1：构建 FAQ 块

User Request: "I need to build an FAQ section with expandable questions"

Good Approach:

Recognize FAQ often uses accordion pattern

Search Block Collection with both scripts:

bash

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

Review results from both searches (they should align, but running both ensures nothing is missed)
Find the accordion block with JS, CSS, and live example URLs
Review the implementation approach
Adapt the pattern to your specific FAQ needs

Why this works:

Used alternative term "accordion" for "FAQ"
Started with Block Collection (Adobe best practices)
Ran both search scripts for comprehensive coverage
Found a vetted, accessible, performant implementation

用户需求： "我需要构建一个带有可展开问题的 FAQ 部分"

推荐方法：

意识到 FAQ 通常使用手风琴模式

使用两个脚本搜索 Block Collection：

bash

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

查看两个搜索的结果（结果应一致，但同时运行可确保无遗漏）
找到包含 JS、CSS 和演示 URL 的手风琴块
查看实现思路
根据你的具体 FAQ 需求调整该模式

为何此方法有效：

使用了 "FAQ" 的替代词 "accordion"
优先使用 Block Collection（Adobe 最佳实践）
运行两个搜索脚本以获得全面覆盖
找到了经过审核、可访问且高性能的实现

Example 2: Finding Breadcrumb Implementation

示例 2：寻找面包屑实现

User Request: "Add breadcrumb navigation to the site"

Good Approach:

Search Block Collection first with both scripts:

bash

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

Find that breadcrumbs is "default-content" (not a standalone block)

Search Block Party:

node .claude/skills/block-collection-and-party/scripts/search-block-party.js breadcrumb

Find breadcrumb block in Block Party
Review the implementation, noting it's community-contributed
Evaluate if it meets your needs or needs adaptation

Why this works:

Checked Block Collection first with both scripts (best practices)
Discovered breadcrumbs exist in Block Collection but as default content (part of header block)
Fell back to Block Party for standalone implementation
Aware that Block Party code may need more review

用户需求： "为网站添加面包屑导航"

推荐方法：

首先使用两个脚本搜索 Block Collection：

bash

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

发现面包屑是 "default-content"（不是独立块）

搜索 Block Party：

node .claude/skills/block-collection-and-party/scripts/search-block-party.js breadcrumb

在 Block Party 中找到面包屑块
查看实现，注意它是社区贡献的
评估它是否满足你的需求或需要调整

为何此方法有效：

首先使用两个脚本搜索 Block Collection（最佳实践）
发现面包屑在 Block Collection 中作为默认内容存在（属于头部块）
退而求其次使用 Block Party 获取独立实现
了解到 Block Party 代码可能需要更多审查

Example 3: Integrating Sass

示例 3：集成 Sass

User Request: "Can we use Sass for our styles instead of plain CSS?"

Good Approach:

Recognize this is a build tooling question (not a block)
Skip Block Collection (doesn't have build tools)

Search Block Party:

node .claude/skills/block-collection-and-party/scripts/search-block-party.js --category "Build Tooling" sass

Find Sass integration examples
Review the approach and adapt to your project

Why this works:

Recognized Block Party is the right resource for build tools
Used category filter to narrow results
Found community examples of the integration

用户需求： "我们可以使用 Sass 替代纯 CSS 来编写样式吗？"

推荐方法：

意识到这是构建工具相关问题（不是块）
跳过 Block Collection（它不包含构建工具）

搜索 Block Party：

node .claude/skills/block-collection-and-party/scripts/search-block-party.js --category "Build Tooling" sass

找到 Sass 集成示例
查看实现思路并适配你的项目

为何此方法有效：

认识到 Block Party 是构建工具相关资源的正确来源
使用类别筛选缩小结果范围
找到社区贡献的集成示例

Example 4: Multiple Implementations Exist

示例 4：存在多种实现

User Request: "Build a carousel for product images"

Scenario: Both Block Collection and Block Party have carousel implementations

Good Approach:

Search Block Collection with both scripts:

bash

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

Find Block Collection carousel from both search results

Also search Block Party:

node .claude/skills/block-collection-and-party/scripts/search-block-party.js carousel

Find multiple Block Party carousels
Prefer Block Collection for best practices
Review Block Party versions to see if they have innovative features worth considering
Make informed decision based on requirements

Why this works:

Searched Block Collection with both scripts for comprehensive coverage
Searched Block Party to see all options
Defaulted to Block Collection (Adobe vetted)
Considered Block Party for potential innovations
Made an informed decision rather than blindly copying

用户需求： "为产品图片构建轮播组件"

场景： Block Collection 和 Block Party 都有轮播实现

推荐方法：

使用两个脚本搜索 Block Collection：

bash

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

从两个搜索结果中找到 Block Collection 的轮播组件

同时搜索 Block Party：

node .claude/skills/block-collection-and-party/scripts/search-block-party.js carousel

找到多个 Block Party 轮播组件
优先选择 Block Collection（遵循最佳实践）
查看 Block Party 的版本，了解是否有值得参考的创新功能
根据需求做出明智的决策

为何此方法有效：

使用两个脚本搜索 Block Collection 以获得全面覆盖
搜索 Block Party 查看所有可用选项
默认选择 Block Collection（Adobe 审核通过）
考虑 Block Party 的潜在创新点
做出明智决策而非盲目复制

Important Reminders

重要提醒

Always search for alternative names - "FAQ" = "accordion", "slideshow" = "carousel"
Prefer Block Collection when available - it's vetted for quality and best practices
Use Block Party for specialized needs - it has broader variety but needs more evaluation
Don't copy blindly - understand the code and adapt it to your project
Review content models carefully - how authors structure content is critical
Check accessibility and performance - especially for Block Party code
Search both resources - sometimes both have implementations with different trade-offs
Category matters for Block Party - use filters when you know what type you need

始终搜索替代名称 - "FAQ" = "accordion"，"slideshow" = "carousel"
优先使用 Block Collection（如果有可用资源） - 它经过质量和最佳实践审核
使用 Block Party 满足特殊需求 - 它涵盖范围更广，但需要更多评估
不要盲目复制 - 理解代码并适配你的项目
仔细审查内容模型 - 作者如何组织内容至关重要
检查可访问性和性能 - 尤其是 Block Party 代码
搜索两个资源 - 有时两者都有实现，各有优劣
类别对 Block Party 很重要 - 当你知道所需类型时使用筛选器

Common Search Patterns

常见搜索模式

Need	Block Collection Search	Block Party Search
FAQ section	`accordion`	`faq` , `accordion`
Image gallery	`carousel`	`gallery` , `carousel` , `slideshow`
Tabbed content	`tabs`	`tabs` , `tabbed`
Navigation	`header`	`navigation` , `menu` , `header`
Footer	`footer`	`footer`
Product cards	`cards`	`cards` , `product`
Video embed	`video` , `embed`	`video` , `embed` , `youtube`
Build tools	N/A	Use `--category "Build Tooling"`
Sidekick plugins	N/A	Use `--category "Sidekick Plugin"`
Integrations	N/A	Search for service name (e.g., `target` , `analytics` )

需求	Block Collection 搜索关键词	Block Party 搜索关键词
FAQ 部分	`accordion`	`faq` , `accordion`
图片画廊	`carousel`	`gallery` , `carousel` , `slideshow`
标签页内容	`tabs`	`tabs` , `tabbed`
导航组件	`header`	`navigation` , `menu` , `header`
页脚	`footer`	`footer`
产品卡片	`cards`	`cards` , `product`
视频嵌入	`video` , `embed`	`video` , `embed` , `youtube`
构建工具	N/A	使用 `--category "Build Tooling"`
Sidekick 插件	N/A	使用 `--category "Sidekick Plugin"`
集成	N/A	搜索服务名称（例如 `target` , `analytics` ）

Troubleshooting

故障排除

No results from both Block Collection scripts:

Running both scripts ensures comprehensive coverage
If neither script returns results, the block likely doesn't exist in Block Collection
Try alternative search terms (e.g., "embed" vs "video", "faq" vs "accordion")
Fall back to Block Party search
If user insists the block exists, use WebFetch to manually check:
- ```
https://github.com/adobe/aem-block-collection/tree/main/blocks
```
Consider building from scratch with guidance from
```
building-blocks
```
skill

Different results between the two scripts:

This is normal - the GitHub API script searches folder names, the nav script searches the navigation
Both results are valid - review both to ensure you haven't missed anything
Prefer GitHub API results if there's a discrepancy (it's more direct)

IMPORTANT - When search returns no results but block likely exists:

Don't immediately accept "no results" as definitive
Running both scripts maximizes chances of finding existing blocks
If the user suggests a block should exist, investigate further
Common blocks that may exist: embed, video, form, consent-management
Use WebFetch to manually browse the GitHub repo
Cross-reference with blocks you know exist (like video, accordion, carousel)

Too many results in Block Party:

Use
```
--category
```
to filter
Refine search terms to be more specific
Review descriptions to find best matches

Found code but seems outdated:

Check Block Collection for newer patterns
Review official docs with
```
docs-search
```
skill
Consider using as inspiration but implementing with modern approaches

Multiple implementations, unsure which to use:

Prefer Block Collection for standard functionality
Choose Block Party for specialized or innovative features
Consider your specific requirements (performance, accessibility, features)
Review code quality and documentation before deciding

两个 Block Collection 脚本都没有返回结果：

运行两个脚本可确保全面覆盖
如果两个脚本都没有返回结果，说明该块可能不存在于 Block Collection 中
尝试使用替代搜索关键词（例如 "embed" vs "video"，"faq" vs "accordion"）
退而求其次使用 Block Party 搜索
如果用户坚持认为该块存在，使用 WebFetch 手动检查：
- ```
https://github.com/adobe/aem-block-collection/tree/main/blocks
```
考虑在
```
building-blocks
```
技能的指导下从头构建

两个脚本返回的结果不同：

这是正常现象 - GitHub API 脚本搜索文件夹名称，导航脚本搜索导航页面
两个结果都有效 - 查看两者以确保没有遗漏
如果存在差异，优先选择 GitHub API 结果（更直接）

重要提示 - 当搜索无结果但块应该存在时：

不要立即接受 "无结果" 作为最终结论
运行两个脚本可最大化找到现有块的机会
如果用户认为块应该存在，请进一步调查
可能存在的常见块：embed、video、form、consent-management
使用 WebFetch 手动浏览 GitHub 代码库
与已知存在的块（如 video、accordion、carousel）交叉参考

Block Party 返回结果过多：

使用
```
--category
```
进行筛选
细化搜索关键词使其更具体
查看描述以找到最佳匹配

找到的代码似乎已过时：

检查 Block Collection 是否有更新的模式
使用
```
docs-search
```
技能查看官方文档
考虑将其作为灵感，但使用现代方法实现

存在多种实现，不确定选择哪一个：

标准功能优先选择 Block Collection
特殊或创新功能选择 Block Party
考虑你的具体需求（性能、可访问性、功能）
决定前审查代码质量和文档

block-collection-and-party

Original

Translation

Using the Block Collection and Block Party

使用 Block Collection 和 Block Party

Overview

概述

When to Use This Skill

何时使用本技能

Related Skills

相关技能

Key Concepts

核心概念

Block Collection vs Block Party

Block Collection 与 Block Party 对比

How to Use This Skill

如何使用本技能

Step 1: Identify Search Terms

步骤 1：确定搜索关键词

Step 2: Search Block Collection

步骤 2：搜索 Block Collection

Run both searches in parallel (preferred approach)

并行运行两个搜索（推荐方式）

Search for accordion/FAQ blocks (both scripts)

搜索手风琴/FAQ 块（两个脚本）

Search for embed block (both scripts)

搜索嵌入块（两个脚本）

If running both is problematic, prioritize the GitHub API version

如果无法同时运行，优先使用 GitHub API 版本

Step 3: Search Block Party

步骤 3：搜索 Block Party

Search for breadcrumb blocks

搜索面包屑块

Search for Sass integration examples

搜索 Sass 集成示例

Search only for build tooling

仅搜索构建工具

Multi-word search

多词搜索

Step 4: Review Search Results

步骤 4：查看搜索结果

Step 5: Get Block Structure Examples (CRITICAL for HTML generation)

步骤 5：获取块结构示例（HTML 生成的关键步骤）

Get accordion structure

获取手风琴结构

Get cards structure (will show multiple variants)

获取卡片结构（将显示多种变体）

Get tabs structure

获取标签页结构

Step 6: Examine the Code

步骤 6：检查代码

Step 7: Apply Learnings

步骤 7：应用所学内容

Search Behavior Details

搜索行为细节

Block Collection Search

Block Collection 搜索

Block Party Search

Block Party 搜索

Examples

示例

Example 1: Building an FAQ Block

示例 1：构建 FAQ 块

Example 2: Finding Breadcrumb Implementation

示例 2：寻找面包屑实现

Example 3: Integrating Sass

示例 3：集成 Sass

Example 4: Multiple Implementations Exist

示例 4：存在多种实现

Important Reminders

重要提醒

Common Search Patterns

常见搜索模式

Troubleshooting

故障排除