> 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. 从左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在 *小组件* 卡片。
3. 选择要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **添加包**.
6. 选择 **添加** 在 *Mint 组件* 卡片。

要将你的 **微站点**:

1. 从左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容。**
2. 选择 **编辑设置** 按钮上的 *微站点* 卡片。
3. 在 *站点托管* 标题，进入 *包* 部分。
4. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **添加包**.
5. 选择 **添加** 在 *Mint 组件* 卡片。
6. 选择 **保存**.

</details>

<details>

<summary>Bedrock 组件</summary>

你可以在……中找到 Bedrock 组件包。 *高级组件* 中的 *添加* 选项卡。

Bedrock 组件包中有两个组件：

**条件部分**

该 *条件部分* 组件允许你根据参与者的邮箱、国家、细分或自定义字段包含条件内容。在 *条件* 框中插入 JSONata 表达式以设置显示条件。然后，将你希望显示给特定参与者群组的任何内容移入条件部分中。

**项目部分**

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

</details>

<details>

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

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

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

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

1. 从左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容**.
2. 选择 **编辑小组件** 在小组件卡片上。
3. 选择要编辑的小组件名称。
4. 在左侧边栏菜单中，选择 **包**.
5. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **添加包**.
6. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3ca70a1ff22f0720bfb8c9e284c7d8178e3a547b%2Fb6a126b0775291b814c5a97f83039ef72ba42d6d02b0fe20f4790213ea01961e.svg?alt=media) **从 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.
