> 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 组件库提供支持。
Mint 组件
使用 Mint 组件构建的小组件和微型站点为客户倡导者提供最新的 Advocate 体验。当前大多数模板都使用 Mint 组件。如果你不确定自己使用的是不是当前的组件库，可以手动检查以确认，并在需要时更新你的库。
要升级到 Mint 组件，请前往你的 **项目小组件**:
1. 从左侧导航菜单中，选择  **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在 *小组件* 卡片。
3. 选择你要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **Packages**.
5. 选择  **Add package**.
6. 选择 **添加** 在 *Mint 组件* 卡片。
要升级到 Mint 组件，请前往你的 **微型站点**:
1. 从左侧导航菜单中，选择  **\[Engage] → 内容。**
2. 选择 **编辑设置** 按钮上的 *微型站点* 卡片。
3. 在 *站点托管* 标题，导航到 *Packages* 部分。
4. 选择  **Add package**.
5. 选择 **添加** 在 *Mint 组件* 卡片。
6. 选择 **保存**.
Bedrock 组件
所有由 Mint 组件提供支持的模板也都安装了 Bedrock 组件包。参与者无法看到 Bedrock 组件，但它们提供了向设计中添加高级逻辑的能力。它们可以有条件地显示其他组件，并定义某个组件从哪个项目中获取数据。你可以在小组件或微型站点编辑器中的 *高级组件* 部分里找到 *添加* 选项卡。
Bedrock 组件包中有两个组件：
**条件区段**
该 *条件区段* 组件允许你根据参与者的电子邮件、国家/地区、细分或自定义字段包含条件内容。在 *条件* 框中插入 JSONata 表达式以设置显示条件。然后，将你希望显示给特定参与者群组的任何内容移动到条件区段中。
**项目区段**
该 *项目区段* 组件允许你覆盖其子组件的项目 ID。可用它来显示未关联到特定项目的内容。默认情况下， *项目区段* 组件包含在大多数小组件和微型站点模板中。
自定义组件库
你可以构建并使用自己的组件包，以进一步自定义你的 Advocate 体验。这些组件可以添加到任何模板中，并与 Advocate 提供的组件一起使用。
Advocate 小组件使用标准 HTML 和 [Web 组件](https://www.webcomponents.org/) 。要在我们的小组件编辑器中使用你自己的组件，它们必须编写为 Web 组件。
要开始使用自定义组件构建你的小组件，请安装你的自定义包：
1. 从左侧导航菜单中，选择  **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在小组件卡片上。
3. 选择你要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **Packages**.
5. 选择  **Add package**.
6. 选择  **从 NPM 添加**.
7. 输入包 *名称*, *版本* 和 *文件路径*.
8. 选择 **添加**.
---
# 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:
```
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=
```
The question should be specific, self-contained, and written in natural language.
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.