> 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/microsite-experiences/microsite-editor-explained.md).

# 微站编辑器详解

微站点编辑器让你通过自定义布局、页面、内容，以及字体和颜色等品牌元素，来控制你的 Advocate 项目参与者将看到的内容。

本文帮助文章解释了编辑器界面，并提供有关微站点结构的一般信息，包括布局、页面和组件。了解更多关于 [设置微站点](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) 和 [自定义品牌和内容](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) 其布局和页面。

#### 打开微站点编辑器

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. 在 *微站点* 卡片中，选择 **编辑内容**.

#### 编辑器界面

微站点编辑器由顶部菜单栏、编辑画布、微站点侧边展开面板以及组件菜单组成。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F6kHBNQwam7HkEsoPhH3u%2FCanvas%20(1).png?alt=media&amp;token=96041e31-6e5e-449a-b018-f94859825093" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="顶部菜单栏" %}
页面顶部的菜单栏可用于撤销操作、查看 HTML 代码以及预览完成后的微站点。使用桌面、平板或移动设备图标，查看你的微站点在不同屏幕尺寸设备上的显示效果。
{% endtab %}

{% tab title="画布" %}
画布显示你微站点的当前内容。你可以选择单个组件进行编辑，或添加新的组件，并一目了然地看到它们将如何展示给参与者。这些组件列在微站点侧边展开面板的左侧。

* 选择 **图层** 以查看页面或布局上所有组件的详细视图
* 选择 **模板** 以查看你微站点页面可用的模板。
* 你将看到一个取决于所选页面、布局、小部件或电子邮件的第三个菜单

  <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="微站点侧边展开面板" %}
微站点侧边展开面板是画布左侧的可折叠面板。它以树状结构可视化你的布局和页面的继承结构。选择单个布局或页面即可查看内容并进行调整。你也可以在这里添加更多页面和布局。

若要在品牌层面进行更进一步的样式设置，请选择“微站点样式”选项。查看 [使用内容编辑器自定义小部件和微站点](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 以了解可用的样式选项。
{% endtab %}

{% tab title="组件菜单" %}
组件菜单位于画布右侧的面板中。使用 *添加* 选项卡将新组件插入画布，并使用 *编辑* 选项卡对已有内容进行调整。
{% endtab %}
{% endtabs %}

#### 微站点结构

在自定义微站点时，有几个重要的基本构件需要了解：布局、页面和组件。

<details>

<summary>布局</summary>

布局就像微站点的“框架”。你可以在这里放置希望贯穿整个微站点显示的组件，例如页眉和横幅图片。

布局和页面通过继承结构相互关联。页面和布局都可以继承某个布局。具有继承布局的页面和布局，其内容会被所继承布局的内容包裹。

{% hint style="info" %}
**示例：** 如果你的基础布局包含页眉图片，任何继承基础布局的页面都会在相同位置显示同一张页眉图片。
{% endhint %}

如果你使用自动设置创建了微站点，那么你的站点默认有三个布局。

**基础布局**

基础布局是你可以放置想要显示的内容的地方，无论参与者当前在哪个页面，以及他们是否已在你的网站上通过身份验证。你可以在这里添加希望在整个站点显示的页眉或页脚。基础布局还包含品牌容器，用于管理整站的颜色和字体。

这两个 *登录后布局* 与 *已登出布局* 都会继承 *基础布局*.

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&amp;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**已登录布局**

该 *登录后布局* 是你可以添加所有已登录参与者都能看到的组件的地方，而不管他们当前在哪个页面。例如，微站点的侧边导航菜单就是通过该布局中的一个组件创建的。由于它被添加到了布局中，任何继承该布局的页面都会包含这个侧边栏。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&amp;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**已登出布局**

该 *已登出布局* 是你可以自定义任何当前未通过身份验证的参与者将看到内容的地方。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&amp;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>页面</summary>

页面是你构建网站内容的地方，例如项目说明、推荐和分享信息，以及文本/图片。选择某个布局中的单独页面即可打开并编辑其内容。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0a6c026b6fbf6429ea9a8ff3ee2db4f6acfc84fd%2F87f7c50502733db94119262cc22612ef67923c5fc190d8c29938be0f4fd5a34f.jpg?alt=media" alt="" width="318"><figcaption></figcaption></figure></div>

可见性也可以在页面级别设置，使你能够将页面访问权限限制为以下选项之一：

* <mark style="color:$success;">**已验证**</mark>: 仅限已登录参与者。
* <mark style="color:$danger;">**未验证**</mark>: 仅限尚未验证其电子邮件地址的已登录参与者。
* **公开**: 任何人均可查看。

如果你使用自动设置创建了微站点，那么你的站点会自带若干继承 *登录后布局* 与 *登录后布局*.

**已登录布局页面：**

* 活动
* 仪表板
* 编辑资料
* 线索提交
* 税务和现金

**已登出布局页面：**

* 邮箱验证
* 忘记密码
* 登录
* 退出登录
* 页面未找到
* 注册
* 重置密码
* 验证邮箱

</details>

<details>

<summary>组件</summary>

组件是你可以添加到页面和布局中的单个元素，用于进一步个性化参与者的微站点体验，例如主视觉图片或推荐信息流。

组件在组件菜单中分组显示。请参阅 [小部件和微站点组件说明](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences.md) 以获取组件分组和各个组件的完整列表。

<div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-75004e7777739ce86600fd0a716eedbd7aa6c52d%2Ff413cd8a60e0c449e8d8a0e0ea0821173134ae92203976190fe299ac2ac079c6.jpg?alt=media" alt="" width="229"><figcaption></figcaption></figure></div>

</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/microsite-experiences/microsite-editor-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.