> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md).

# 组件库详解

组件是独立的构建块，例如主视觉图片和任务卡片，它们共同构成您的小组件或微型网站。我们当前的所有模板都由 Mint 和 Bedrock 组件库提供支持。

<details>

<summary>Mint 组件</summary>

使用 Mint 组件构建的小组件和微型网站可为客户倡导者提供最新的 Advocate 体验。当前大多数模板都使用 Mint 组件。如果您不确定自己是否在使用当前组件库，可以手动检查确认，并在需要时更新您的库。

要为您的 **项目小组件**:

1. 从左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在 *小组件* 卡片。
3. 选择要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
6. 选择 **添加** 在 *Mint 组件* 卡片。

要为您的 **微型网站**:

1. 从左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容。**
2. 选择 **编辑设置** 上的按钮 *微型网站* 卡片。
3. 在 *网站托管* 标题，然后导航到 *包* 部分。
4. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
5. 选择 **添加** 在 *Mint 组件* 卡片。
6. 选择 **保存**.

</details>

<details>

<summary>Bedrock 组件</summary>

所有由 Mint 组件驱动的模板也都安装了 Bedrock 组件包。参与者看不到 Bedrock 组件，但它们可让您为设计添加高级逻辑。它们可以有条件地显示其他组件，并定义某个组件从哪个项目获取数据。您可以在 *高级组件* 中的 *添加* 小组件或微型网站编辑器中的选项卡。

Bedrock 组件包中有两个组件：

**条件部分**

该 *条件部分* 组件允许您根据参与者的电子邮件、国家/地区、细分或自定义字段包含条件内容。在 *条件* 框中设置显示条件。然后，将您希望显示给特定参与者群组的任何内容移动到条件部分中。

**项目部分**

该 *项目部分* 组件允许您覆盖其子组件的项目 ID。可用它来显示未链接到特定项目的内容。该 *项目部分* 组件默认包含在大多数小组件和微型网站模板中。

</details>

<details>

<summary>自定义组件库</summary>

您可以构建并使用自己的组件包，以进一步自定义您的 Advocate 体验。这些组件可以添加到任何模板中，并与 Advocate 提供的组件一起使用。

Advocate 小组件使用标准 HTML 和 [Web 组件](https://www.webcomponents.org/) 。要在我们的小组件编辑器中使用您自己的组件，它们必须编写为 Web 组件。

要开始使用自定义组件构建您的小组件，请安装您的自定义包：

1. 从左侧导航菜单中，选择 ![](/files/209022bdb234289211a24a980f6227a8684cc439) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在小组件卡片上。
3. 选择要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **添加包**.
6. 选择 ![](/files/724207cd384cb04254f395812b496d20a45599e8) **从 NPM 添加**.
7. 输入包 *名称*, *版本* 和 *文件路径*.
8. 选择 **添加**.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.impact.com/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
