> 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>

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

Bedrock 组件包中有两个组件：

**条件区块**

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

**项目区块**

该 *项目区块* 组件允许你覆盖其子组件的项目 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
