文档AEM as a Cloud Service用户指南

使用主题为基于核心组件的自适应Forms设置样式 themes-for-af-using-core-components

Last update: Thu Nov 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 适用对象：
  • Experience Manager as a Cloud Service

创建对象：

  • 用户
  • 开发人员
版本
文章链接
AEM 6.5
单击此处
AEM as a Cloud Service
本文

您可以创建主题并应用它们来设置自适应表单的样式。 主题包含组件和面板的样式详细信息。 样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。在应用主题时，指定的样式会反映在相应的组件上。主题是独立管理的，无需引用自适应表单，并且可在多个自适应Forms中重复使用。

在本文中，我们了解如何使用主题为基于核心组件的自适应Forms设计自定义外观。

用于设置核心组件样式的可用主题

Forms如Cloud Service所提供，下面列出了基于核心组件的自适应Forms的主题：

了解主题结构

主题是一个包，其中包含可定义自适应Forms样式的样式组件(如CSS文件、JavaScript文件和资源，如图标)。 自适应表单主题遵循特定的组织，由以下组件组成：

  • src/theme.scss：此文件夹包含对整个主题具有广泛影响的CSS文件。 它用作定义和管理主题样式和行为的集中位置。 通过编辑此文件，您可以做出在整个主题中普遍应用的更改，从而影响自适应Forms和AEM Sites页面的外观和功能。

  • src/site：此文件夹包含应用于整个AEM站点页面的CSS文件。 这些文件由代码和样式组成，这些代码和样式会影响AEM站点页面的整体功能和布局。 此处所做的任何修改都会反映在网站的所有页面中。 [何时使用它？]

  • src/components：此文件夹中的CSS文件是为单个AEM核心组件设计的。 组件的每个专用文件夹都包含一个.scss文件，该文件在自适应表单中为该特定组件设置样式。 例如，/src/components/accordion/_accordion.scss文件包含自适应Forms折叠组件的样式信息。

    基于自适应表单的主题结构

  • src/resources：此文件夹包含静态文件，如图标、徽标和字体。 这些资源用于增强主题的可视化元素和总体设计。

创建主题

Forms如Cloud Service所提供，下面列出了基于核心组件的自适应Forms的自适应表单样式主题。

您可以自定义任何这些主题以创建新主题。

主题自定义工作流

自定义主题 customize-a-theme-core-components

自定义主题是指修改、样式化和个性化主题外观的过程。 自定义主题时，您可以更改其设计元素、布局、颜色、排版规则，有时还会更改底层代码。 它允许您为网站或应用程序创建独一无二的定制外观，同时保持主题提供的基本结构和功能。

先决条件 prerequisites-to-customize

  • 熟悉在Cloud Manager中设置管道，并了解如何设置管道的基础知识可帮助您高效地管理和部署主题自定义项。
  • 了解如何配置具有参与者角色的用户。 通过了解如何使用参与者角色配置用户，您可以授予进行主题自定义所需的权限。
  • 安装Apache Maven的最新版本。 Apache Maven是一种常用于Java™项目的构建自动化工具。 安装最新版本可确保您具有主题自定义所需的依赖项。
  • 安装纯文本编辑器。 例如，Microsoft® Visual Studio Code。 使用Microsoft等纯文本编辑器®Visual Studio Code为编辑和修改主题文件提供了用户友好的环境。

设置环境

  • 安装最新的Far以便为您的AEM Cloud Service环境启用自适应Forms核心组件。
  • 为您的Cloud Service环境配置前端部署管道。 或者，您可以稍后配置管道，灵活地在设置部署管道之前排定测试和优化主题的优先级。

在了解先决条件并配置开发环境后，您已准备好开始根据特定要求自定义主题或设置主题样式。

自定义主题 steps-to-customize-a-theme-core-components

自定义主题是一个多步骤的过程。 要自定义主题，请按照列出的顺序执行步骤：

  1. 克隆主题
  2. 设置主题的名称
  3. 自定义主题
  4. 测试主题
  5. 部署主题

文档中提供的示例基于​ 画布 ​主题，但请务必注意，您可以使用相同的说明克隆并自定义任何主题。 这些说明适用于任何主题，允许您根据特定需求修改主题。

让我们从使用主题为基于核心组件的自适应Forms创建品牌体验的流程开始？

1.克隆主题 download-a-theme-core-components

要克隆基于核心组件的自适应Forms的主题，请选择以下主题之一：

要克隆主题，请执行以下步骤：

  1. 在本地开发环境中打开命令提示符或终端窗口。

  2. 运行git clone命令以克隆主题。

    code language-none 
       git clone [Path of Git Repository of the theme]

    将主题[的Git存储库的]路径替换为主题的相应Git存储库的实际URL

    例如，要克隆画布主题，请执行以下命令：

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

    成功执行命令后，aem-forms-theme-canvas文件夹中提供了计算机上主题的本地副本。

2.设置主题名称 set-name-of-theme

  1. 在IDE中打开主题文件夹。 例如，在Visual Studio代码编辑器中打开aem-forms-theme-canvas文件夹。

  2. 导航到 aem-forms-theme-canvas 文件夹。

  3. 运行以下命令：

    code language-none 
       code .

    在纯文本编辑器中打开主题文件夹

    该文件夹将在Visual Studio Code中打开。

  4. 打开 package.json 文件以供编辑。

  5. 设置name和version属性的值。

    画布主题名称更改图像

    note note
    NOTE
    • name属性用于唯一标识主题，指定的名称显示在​ 表单创建向导 ​的​ 样式 ​选项卡中。
    • 您可以选择根据自己的选择为主题选择一个名称，例如mytheme或customtheme。 但是，对于这种情况，我们已将名称指定为aem-forms-wknd-theme。

  6. 打开 package-lock.json 文件以供编辑。

  7. 设置name和version属性的值。 确保name.json文件中version和Package-lock属性的值与Package.json文件中的值匹配。

    画布主题名称更改图像

  8. （可选）打开ReadMe文件进行编辑并更新主题的名称。

    画布主题名称更改图像

  9. 保存并关闭文件。

设置主题名称时的注意事项

  • 必须从@aemforms文件和Package.json文件中的主题名称中移除Package-lock.json。 如果无法从自定义主题名称中删除@aemforms，则会导致前端管道在主题部署期间失败。
  • 建议更新version文件和Package.json文件中的主题Package-lock.json，以准确反映主题随时间发生的更改和增强功能。
  • 有关用法、安装说明和其他相关详细资料的重要信息，建议更新ReadMe文件中主题的名称。

3.自定义主题 customize-the-theme

您可以使用主题的全局变量自定义单个组件或进行主题级别更改。 对全局变量所做的任何更改都会影响所有单独的组件。 例如，您可以使用全局变量更改自适应表单所有组件的边框颜色，并使用明亮的填充颜色来使用按钮组件设置CTA (Call to action)：

设置主题级别样式 theme-customization-global-level

variable.scss文件包含主题的全局变量。 通过更新这些变量，您可以在主题级别进行与样式相关的更改。 要应用主题级别的样式，请执行以下步骤：

  1. 打开 <your-theme-sources>/src/site/_variables.scss 文件以供编辑。

  2. 更改任何属性的值。 例如，默认错误颜色为red。 若要将错误颜色从red更改为blue，请更改$errorvariable的颜色十六进制代码。 例如 $error: #196ee5。

  3. 保存并关闭该文件。

    编辑主题

同样，您可以使用variable.scss文件设置字体系列和类型、主题和字体颜色、字体大小、主题间距、错误图标、主题边框样式以及影响多个自适应表单组件的更多变量。

设置组件级别样式 component-based-customization

您还可以更改特定自适应表单核心组件的字体、颜色、大小和其他CSS属性。 例如，按钮、复选框、容器、页脚等。 您可以通过编辑特定组件的CSS文件来设置按钮或复选框的样式，以便与贵组织的样式保持一致。 要自定义组件的样式：

  1. 打开文件<your-theme-sources>/src/components/<component>/<component.scss>进行编辑。 例如，要更改按钮组件的字体颜色，请打开<your-theme-sources>/src/components/button/button.scss文件。

  2. 根据您的要求更改任意的值。 例如，若要将鼠标悬停时按钮组件的颜色更改为green，请将color: $white类中cmp-adaptiveform-button__widget:hover属性的值更改为十六进制代码#12B453或任何其他阴影的green。 最终代码如下所示：

    code language-none 
    .cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}

  3. 保存并关闭该文件。

    编辑文本框CSS

    note note
    NOTE
    在主题和组件级别定义样式时，在组件级别定义的样式优先。

4.测试自定义主题 test-the-theme

要在本地环境中预览和测试更改，并根据不同AEM组件的要求自定义主题，请执行以下步骤：

4.1.配置本地环境以进行测试 rename-env-file-theme-folder

  1. 在IDE中打开主题文件夹。 例如，在Visual Studio代码编辑器中打开aem-forms-theme-canvas文件夹。

  2. 将env_template文件重命名为主题文件夹中的.env文件，并添加以下参数：

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    例如，表单的URL为http://localhost:4502/editor.html/content/forms/af/contactusform.html。 因此，的值：

    • AEM_URL = http://localhost:4502/
    • AEM_ADAPTIVE_FORM = contactusform

  3. 保存文件。

    画布主题结构

4.2使用本地环境测试主题 start-a-local-proxy-server

  1. 导航到主题文件夹的根。 在这种情况下，主题文件夹名称为aem-forms-theme-canvas。

  2. 打开命令提示符或终端。

  3. 运行npm install以安装依赖项。

  4. 运行npm run live以在本机浏览器中预览具有更新主题的表单。

    note note
    NOTE
    如果在执行npm run live命令期间出错，请在npm run live命令之前执行以下命令：
    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

这是一个热门部署。 因此，每当您进行任何更改并保存_variables.scss和button.scss文件时，服务器都会自动选取更改并预览最新输出。 行[Browsersync] File event [change]表示服务器已识别最新更改并且正在本地环境中部署更改。

代理浏览器同步

在主题级别和组件级别遵循了在主题自定义中设置自适应表单（核心组件）样式的示例后，自适应表单的错误消息将更改为blue颜色，而按钮组件的标签颜色在悬停时更改为green。

预览主题级别样式

示例：错误颜色设置为蓝色

正在预览组件级样式

示例：将悬停颜色设置为绿色

自定义主题有助于根据组织要求，设计基于核心组件的自适应Forms的自定义查找。

测试在Cloud Service环境中托管的表单的主题

您还可以测试AEM Forms as a Cloud Service实例上托管的自适应表单的主题。 要在云实例上托管的自适应Forms中为测试主题配置和设置本地环境，请执行以下步骤：

  1. 在IDE中打开主题文件夹。 例如，在Visual Studio代码编辑器中打开aem-forms-theme-canvas文件夹。

  2. 将env_template文件重命名为.env文件并添加以下参数：

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    例如，云环境中表单的URL是https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html。 因此，的值：

    • AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
    • AEM_ADAPTIVE_FORM = contactusform

  3. 保存文件。

  4. 创建本地用户。

    note note
    NOTE
    要创建本地用户，请执行以下操作：
    • 转到​AEM主页 > 工具 > 安全性 > 用户 。
    • 确保用户是forms-users组的成员。

  5. 导航到主题文件夹的根。 在这种情况下，主题文件夹名称为aem-forms-theme-canvas。

  6. 运行npm run live，您将被重定向到本地浏览器。

  7. 单击SIGN IN LOCALLY (ADMIN TASKS ONLY)并使用本地用户的凭据登录。

您可以预览包含最新更改的自适应表单。 在对主题文件夹中所做的修改感到满意后，使用前端管道将主题部署到AEM Cloud Service环境。

5.部署主题 deploy-the-theme

要使用前端管道将主题部署到Cloud Service环境，请执行以下操作：

5.1创建主题存储库 create-a-new-theme-repo

您需要存储库来部署主题。 登录到您的AEM Cloud Manager存储库并为您的主题添加新存储库。

  1. 通过单击​存储库 > 添加存储库​为主题创建新存储库。

    创建新主题存储库

  2. 在​ 添加存储库 ​对话框中指定​存储库名称。 例如，提供的名称是custom-canvas-theme-repo。

  3. 单击​保存。

    添加画布主题存储库

  4. 单击​ 复制存储库URL ​以复制存储库的URL。

    画布主题URL

    note note
    NOTE
    • 您可以将单个存储库用于多个主题。
    • 要部署不同的主题，您必须创建单独的前端管道。
    • 例如，您可以将相同的存储库(custom-canvas-theme-repo)用于画布主题、WKND主题和EASEL主题。 但是，要部署主题，您需要创建单独的前端管道。 使用相应的前端管道部署特定主题的未来自定义。
5.2.将更改推送到存储库 committing-the-changes

现在，将更改推送到AEM Forms Cloud Service的主题存储库。

  1. 导航到主题文件夹的根。 在这种情况下，主题文件夹名称为aem-forms-theme-canvas。

  2. 打开命令提示符或终端。

  3. 按照列出的顺序运行以下命令：

    code language-none 
    git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]

    例如：

    code language-none 
    git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo

    已提交更改

5.3运行前端管道 run-a-frontend-pipeline

使用前端管道部署主题。 要部署主题，请执行以下步骤：

  1. 登录到AEM Cloud Manager存储库。

  2. 单击​ 管道 ​部分中的​ 添加 ​按钮。

  3. 基于Cloud Service环境选择​ 添加非生产管道 ​或​添加生产管道。 例如，此处选择了​ 添加生产管道 ​选项。

  4. 在​ 将生产管道 ​添加为​ 配置 ​步骤的一部分对话框中，指定管道的名称。 例如，管道的名称为customcanvastheme。

  5. 单击​继续。

  6. 选择​目标部署 > 前端代码​选项，位于
    Source代码​步骤。

  7. 选择具有最新更改的​ 存储库 ​和​ Git分支 ​值。 例如，此处选定的存储库名称为custom-canvas-theme-repo，Git分支为main。

  8. 如果根文件夹中存在更改，请选择​ 代码位置 ​作为/。

  9. 单击​保存。
    创建前端管道

    管道设置完成后，将更新call-to-action信息卡。

  10. 右键单击创建的管道。

  11. 单击​运行 。

    运行管道

构建完成后，主题即可在创作实例中供使用。 创建自适应表单时，它显示在“自适应表单”创建向导的​ 样式 ​选项卡下。

样式选项卡下有 自定义主题

自定义主题有助于为基于核心组件的自适应Forms创建品牌体验。

将主题应用于自适应表单 using-theme-in-adaptive-form

将主题应用于自适应表单的步骤如下：

  1. 登录到您的AEM Forms创作实例。

  2. 选择​Adobe Experience Manager > 表单 > 表单和文档。

  3. 单击​创建 > 自适应Forms。 此时将打开创建自适应表单的向导。

  4. 在​ Source ​选项卡中选择核心组件模板。

  5. 在​ 样式 ​选项卡中选择主题。

  6. 单击​创建。

创建自适应表单时，自适应表单主题用作自适应表单模板的一部分来定义样式。

最佳做法 best-practices

  • 避免使用其他主题中的资源

    编辑主题时，您可以浏览和添加其他主题中的资产（如图像）。 例如，您正在编辑页面的背景。 例如，当您选择​Page edit-button > Background > Add > Image​时，您会看到一个对话框，允许您浏览并添加其他主题中的图像。

    如果从其他主题添加资产，并且移动或删除了其他主题，则您可能会遇到当前主题的问题。 建议您避免浏览和添加其他主题中的资产。

  • 更改容器面板布局宽度

    不建议更改容器面板布局宽度。 指定容器面板的宽度时，其将变为静态并且不会适应不同的显示。

常见问题解答 faq

问：​在全局级别和组件级别的主题文件夹中进行自定义时，哪个自定义项优先？

Ans：​在全局级别和组件级别进行自定义设置时，组件级别的自定义设置优先。

另请参阅 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab