若要将自己的图章放在模板主题上并转换其外观，请构建自定义 主题布局组件。您可以自定义模板的结构布局，例如标题 和页脚，并覆盖其默认样式。
主题布局组件是模板的顶级布局 （1） 网站中的页面。主题布局组件通过以下方式组织并应用于您的页面 主题布局。主题布局组件包括通用页眉和页脚 （2），并且通常 包括导航、搜索和用户配置文件菜单。相比之下，内容布局 （3） 定义页面的内容区域。下图显示了两列内容 布局。
自定义主题布局如何工作？
要了解主题布局的工作原理，让我们看看体验中的内容 构建器透视图。在Experience Builder中，主题布局与主题布局组件相结合 让您精细控制网站中每个页面的外观和结构。您可以 自定义布局的页眉和页脚以匹配您公司的品牌和风格，配置 主题属性，或使用自定义搜索栏和用户配置文件菜单。然后，使用主题布局 将主题布局组件应用于单个页面并快速更改一个页面的布局 中心位置。主题布局对网站中共享相同主题布局的页面进行分类 元件。您可以将主题布局组件分配给任何现有主题布局。然后你 在页面的 性能。
例如，Customer Service 模板包括以下主题 布局和组件，但您可以创建自定义组件或将布局切换为 需要。
- 默认将 Customer Service 主题布局应用于除登录名之外的所有页面 页面。
- 登录管理器将登录正文布局主题布局组件应用于登录页面。
例
假设您为即将到来的春季广告系列创建了三个页面。使用该界面，您可以创建一个 开发者控制台中的自定义大标题主题布局。在“设置”|”主题区域中，您可以添加一个名为 Spring 的自定义主题布局来对广告系列进行分类 页面，然后将“大页眉布局”组件分配给它。forceCommunity:themeLayout
接下来，在每个页面的属性中应用 Spring 主题布局，这会立即 将“大页眉”布局应用于每个页面。选择覆盖默认主题 此页面的布局。（1） 显示主题布局。选择新布局 （2） 从可用的选项中。
一切看起来 玫瑰色直到副总裁 营销部门认为标题占用了太多空间。这很容易解决，因为你 无需更新每个页面的属性即可更改主题布局。取而代之的是，使用 在主题区域一键切换，即可将 Spring 切换到 Small Header 布局，并立即 更新所有三个页面。
例
现在，假设“小标题”布局包括两个自定义属性：蓝色 背景和小标志。您已启用这些属性并将其应用于所有广告系列 页面。但是，对于一个页面，您只想应用 Small Logo 属性。
在这种情况下，您可以创建一个名为 Spring B 的主题布局，分配 Small Header layout 组件，并启用 Small Logo。然后，将 Spring B 主题应用于 页。
不确定哪些页面与您的任何主题布局相关联？
只需单击并一目了然，您就可以看到有多少个页面以及与其中任何一个页面相关联 您的主题布局。从“设置”|”主题，单击任何主题布局行 （1） 的“分配的页面总数”。单击此按钮 value 打开与该主题布局关联的页面列表 （2）。
主题布局可以很容易地以不同的方式重用相同的主题布局组件，而 根据需要保持尽可能多的精细控制。
配置自定义主题布局组件
让我们看看如何在开发者控制台中创建自定义主题布局组件，以 转换 Customer Service 中页面的外观和整体结构 模板。
1. 将界面添加到您的主题布局 元件
主题布局组件必须实现界面才能显示在Experience Builder的“设置”|”主题面积。forceCommunity:themeLayout
在代码中显式声明，以确保主题布局包含内容布局。添加您希望页面内容显示的任何位置 在主题布局中。{!v.body}{!v.body}
在主题布局中添加声明为包含区域的属性，这些属性包含 页面的组件。您可以将组件添加到标记中的区域，也可以保留区域 打开供用户拖放组件。声明为标记并包含在标记中的属性呈现为 在主题布局中打开用户可以向其添加组件的区域。为 例：Aura.Component[]Aura.Component[]
<aura:component implements="forceCommunity:themeLayout">
<aura:attribute name="myRegion" type="Aura.Component[]"/>
{!v.body}
</aura:component>在 Customer Service 中，模板标题包括 这些锁定区域。
- search，其中包含搜索发布服务器 元件
- profileMenu，其中包含配置文件标头 元件
- navBar，其中包含导航菜单 元件
创建重用模板中现有组件的自定义主题布局 标头区域，根据需要声明 、 或作为属性名称值。为 例：
searchprofileMenunavBar
<aura:attribute name="navBar" type="Aura.Component[]" required="false" />提示
如果创建可交换的自定义配置文件菜单或搜索 组件，声明 or 属性名称值还允许用户选择 在Experience Builder中使用主题布局时的自定义组件。searchprofileMenu
将区域添加到标记 以定义在主题布局正文中显示它们的位置。下面是 一个简单的主题 布局。
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
<div>
<div class="searchRegion">
{!v.search}
</div>
<div class="profileMenuRegion">
{!v.profileMenu}
</div>
<div class="navigation">
{!v.navBar}
</div>
<div class="newHeader">
{!v.newHeader}
</div>
<div class="mainContentArea">
{!v.body}
</div>
</div>
</aura:component>2. 添加设计资源以包含主题属性
您可以在Experience Builder中公开主题布局属性，方法是添加 将资源设计到您的捆绑包中。
首先，在组件中实现属性。
<aura:component implements="forceCommunity:themeLayout" access="global" description="Small Header">
<aura:attribute name="blueBackground" type="Boolean" default="false"/>
<aura:attribute name="smallLogo" type="Boolean" default="false" />
...在设计资源中定义主题属性，以在 UI 中公开这些属性。本示例为 Small 添加标签 标题主题布局以及两个复选框。
<design:component label="Small Header">
<design:attribute name="blueBackground" label="Blue Background"/>
<design:attribute name="smallLogo" label="Small Logo"/>
</design:component>
3. 添加 CSS 资源以避免重叠问题
将 CSS 资源添加到捆绑包中，以根据需要设置主题布局的样式，最好使用标准设计标记。
要避免与定位元素（如对话框或悬停器）出现重叠问题，请执行以下操作：
- 应用 CSS 样式。
.THIS { position: relative; z-index: 1; } - 将自定义主题布局中的元素包装在标签中。div
<div class="mainContentArea"> {!v.body} </div>
注意
主题布局控制其中任何内容的样式，因此它可以添加样式，例如 作为区域或组件的投影。对于自定义主题布局，SLDS 由 违约。
使用表达式向 Aura 站点添加动态数据
使用表达式，您可以访问属性值和其他信息以传递到 组件的属性。
表达式是任何一组文本值、变量、子表达式或运算符，它们 可以解析为单个值。表达式中不允许进行方法调用。
表达式语法为： 其中 是表达式的占位符。{!expression}expression
使用这些表达式可显示经过身份验证的用户的信息、关联的图像 具有数据类别，或在网站页面上记录信息。
| 表达 | 显示 |
|---|---|
| {!CurrentUser.name} | 组合用户的名字和姓氏，如用户详细信息上所示 页。 |
| {!CurrentUser.firstName} | 用户的名字，如用户编辑页面上所示。 |
| {!CurrentUser.lastName} | 用户的姓氏，如用户编辑页面上所示。 |
| {!CurrentUser.userName} | 定义用户登录名的管理字段。 |
| {!CurrentUser.id} | 用户的 Salesforce ID。 |
| {!CurrentUser.email} | 用户的电子邮件地址。 |
| {!CurrentUser.communityNickname} | 用于标识网站中用户的名称。 |
| {!CurrentUser.accountId} | 与用户关联的帐户 ID。此表达式显示有效帐户 合作伙伴和客户用户的 ID。对于所有其他内容，它显示 ‘000000000000000’. |
| {!CurrentUser.effectiveAccountId} | 与有效账户关联的账户 ID。此表达式显示 合作伙伴和客户用户的有效帐户 ID。对于所有其他内容，它显示 ‘000000000000000’. |
| {!Global.PathPrefix}/{!DataCategory.Name}.jpg | 与搜索组件中的数据类别关联的图像。 |
| {!Global.PathPrefix}/<Name of the Subfolder>/{!DataCategory.Name}.jpg | 与搜索中的子文件夹中的数据类别关联的图像 元件。 |
| {!recordId} | 对象页面上的 15 位记录 ID。 |
| {!term} | 在基于 Aura 的标准中返回 HTML 编码的搜索词的表达式 搜索页面。 |
为 Experience Builder 创建自定义内容布局组件
Experience Builder 包含多个定义内容的即用型布局 页面的区域，例如比例为 2：1 的两列布局。但是，如果您需要 为您的网站自定义的布局，请创建自定义内容布局组件以在以下情况下使用 在Experience Builder中构建新页面。您还可以更新默认的内容布局 网站模板附带的页面。
当您在开发者控制台中创建自定义内容布局组件时，它会 显示在 Experience Builder 的 “新建页面”和“更改布局”对话框。
1. 向内容布局组件添加新界面
要显示在Experience Builder的“新建页面”和“更改布局”对话框中，请 内容布局组件必须实现接口。forceCommunity:layout下面是一个简单的两列内容的示例代码 布局。
<aura:component implements="forceCommunity:layout" description=”Custom Content Layout” access="global">
<aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute>
<aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute>
<div class="container">
<div class="contentPanel">
<div class="left">
{!v.column1}
</div>
<div class="right">
{!v.column2}
</div>
</div>
</div>
</aura:component>注意
标记您的资源，例如 一个组件，用 可在您自己的组织外部使用的资源。access=”global”例如，如果您想要一个组件 可在已安装的软件包中使用，或由 Lightning 应用程序构建器用户或 其他组织中的 Experience Builder 用户。
您还可以为 标记为 的组件、事件或接口。本文档会自动显示在 使用或安装包的组织的组件库。access=”global”
2. 将 CSS 资源添加到组件包中
接下来，添加一个 CSS 资源来设置 根据需要进行内容布局。
下面是我们简单的两列内容布局的示例 CSS。
.THIS .contentPanel:before,
.THIS .contentPanel:after {
content: " ";
display: table;
}
.THIS .contentPanel:after {
clear: both;
}
.THIS .left {
float: left;
width: 50%;
}
.THIS .right {
float: right;
width: 50%;
}CSS 资源必须命名为 componentName.css。
3. 可选：将 SVG 资源添加到组件包
您可以在 组件包，用于定义内容布局组件出现在 体验生成器。
Experience Builder 中内容布局组件的建议图像大小为 170px 按 170px。但是，如果图像具有不同的尺寸，则 Experience Builder 会进行缩放 要适合的图像。
SVG 资源必须命名为 componentName.svg。
配置可交换搜索和配置文件菜单组件
创建自定义组件以替换模板的标准配置文件标题和搜索 & Experience Builder 中的 Post Publisher 组件。
例如，在 Customer Service 中，模板标题由这些锁定的 地区：
- search，其中包含搜索发布服务器 元件
- profileMenu，其中包含配置文件标头 元件
- navBar，其中包含导航菜单 元件
通过这些指定的区域名称，您可以轻松地：
- 在默认主题布局组件或自定义组件中交换搜索和配置文件组件 主题布局组件。
- 交换主题布局组件，同时保留现有自定义项，例如 选定的搜索组件。
当组件实现正确的接口（在本例中为 ）时，它将被标识为候选接口 对于这些地区。因此，它们在主题布局中显示为可交换组件 组件，例如默认的 Customer Service 主题布局组件，该组件声明 或 作为属性名称 价值。
forceCommunity:searchInterfaceforceCommunity:profileMenuInterfacesearchprofileMenu
<aura:attribute name="search" type="Aura.Component[]" required="false" />forceCommunity：profileMenuInterface
添加接口 添加到 Aura 组件中，以允许将其用作 模板。创建自定义配置文件菜单组件后，管理员可以在Experience Builder的“设置”|”主题以替换模板的标准配置文件标头组件。forceCommunity:profileMenuInterface
此代码适用于简单的配置文件菜单组件。
<aura:component implements="forceCommunity:profileMenuInterface" access="global">
<aura:attribute name="options" type="String[]" default="Option 1, Option 2"/>
<ui:menu >
<ui:menuTriggerLink aura:id="trigger" label="Profile Menu"/>
<ui:menuList class="actionMenu" aura:id="actionMenu">
<aura:iteration items="{!v.options}" var="itemLabel">
<ui:actionMenuItem label="{!itemLabel}" click="{!c.handleClick}"/>
</aura:iteration>
</ui:menuList>
</ui:menu>
</aura:component>forceCommunity：搜索接口
将接口添加到 Aura 组件，允许将其用作模板的自定义搜索组件。后 您创建自定义搜索组件，管理员可以在Experience Builder的“设置”|”主题替换模板的标准 Search & Post Publisher 组件。forceCommunity:searchInterface
此代码适用于简单的搜索组件。
<aura:component implements="forceCommunity:searchInterface" access="global">
<div class="search">
<div class="search-wrapper">
<form class="search-form">
<div class="search-input-wrapper">
<input class="search-input" type="text" placeholder="My Search"/>
</div>
<input type="hidden" name="language" value="en" />
</form>
</div>
</div>
</aura:component>Experience Builder 站点的标准设计令牌
Salesforce 公开了一组基本令牌，您可以在组件样式中访问这些令牌 资源。您可以使用这些标准令牌来模仿 Salesforce 的外观 Lightning Design System （SLDS） 在您自己的自定义组件中。随着 SLDS 的发展，组件 使用标准设计令牌进行样式设置的令牌也随之发展。使用 标准设计令牌，使您的组件与体验中的“主题”面板兼容 建筑工人。
通过“主题”面板，管理员可以使用品牌快速设置整个网站的样式 性能。“主题”面板中的每个属性都映射到一个或多个标准设计标记。 当管理员更新“主题”面板中的属性时，系统会更新 使用与该属性关联的令牌的 Lightning 组件。
Experience Builder 站点的可用令牌
对于Experience Builder站点，扩展时可以使用以下标准令牌 来自 force：base。
重要
标准令牌值随着 SLDS 的发展而变化。可用的令牌和 它们的值可能会更改，恕不另行通知。
| 这些“主题”面板属性… | …映射到这些标准设计令牌 |
|---|---|
| 文本颜色 | colorTextDefault |
| 详细文本颜色 | colorTextActionLabel |
| 动作颜色 | colorBackgroundButtonBrandcolorBorderBrandcolorBorderButtonBrandcolorBrandcolorTextBrandcolorTextActionLabelActivecolorTextTabLabelSelected注意从 Summer ’18 开始，不再映射到 Action Color。colorBackgroundHighlight |
| 链接颜色 | colorTextLink |
| 公司 Logo | brandLogoImage |
| 叠加文本颜色 | colorTextButtonBrandcolorTextButtonBrandHovercolorTextInverse |
| 边框颜色 | colorBordercolorBorderButtonDefaultcolorBorderInputcolorBorderSeparatorAlt |
| 主字体 | fontFamily |
| 文本大小写 | textTransform |
此外，以下标准令牌可用于 模板。在更新 “主题”面板中的属性。例如，如果更改 主题面板中，系统会根据新的 价值。
| 这些派生的品牌属性… | …映射到这些标准设计令牌 |
|---|---|
| 动作颜色更暗（源自 Action Color） | colorBackgroundButtonBrandActivecolorBackgroundButtonBrandHover |
| 悬停颜色（源自 Action Color） | colorBackgroundButtonDefaultHovercolorBackgroundRowHovercolorBackgroundRowSelectedcolorBackgroundShade |
| 链接颜色较深（源自 Link Color） | colorTextLinkActivecolorTextLinkHover |
有关 SLDS 中可用的设计令牌的完整列表，请参阅 Lightning Design 上的设计令牌 系统站点。
注意
一些开箱即用的组件不使用标准设计令牌。因此，如果你 使用标记 在设置主题布局样式时，某些组件可能不会继承 定义。
确保具有 Experience Cloud 站点的组织中的自定义组件是安全的
开发人员可以通过以下方式自定义 Experience Cloud 站点中的功能和业务逻辑 使用自定义组件。与任何自定义解决方案一样，开发人员必须意识到潜力 与安全相关的陷阱。绕过内置防御措施可以使站点和组织暴露在安全之下 风险。
例如，如果开发人员在自定义组件的定义中将敏感数据存储为文本， 数据可能会暴露。当数字体验 在组织中启用，组织具有自定义组件，并且自定义组件的开发人员名称为 已知。无论网站是公共的还是私有的，都可能发生暴露。
公开的数据可以包括：
- 在组件定义中存储为文本的敏感信息
- 组件的完整组件定义，包括 HTML、JavaScript 和 CSS 文件
- 组件定义中包含的任何其他组件的名称
- 组件定义中使用的任何 Apex 控制器和方法名称
此类数据可以针对组织中的任何自定义组件公开，无论它们是否用于 Salesforce 组织、Experience Cloud 站点上或未使用时。请执行以下步骤来降低自定义组件中数据泄露的风险。
- 查看组织中所有自定义组件中的组件定义
- 避免在组件定义中存储任何敏感数据。敏感数据可以包括 个人身份信息、公司机密信息或任何信息 被视为对您的业务和客户敏感
- 查看所有自定义控制器，并确保只有必需的用户配置文件具有访问权限 对他们来说
- 确保使用@AuraEnabled
- 对组织复杂且唯一的自定义组件使用命名约定