文档AEM 6.5用户指南

创建或自定义自适应表单主题 introduction-to-theme

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • undefined
  • undefined
版本
文章链接
AEM as a Cloud Service
单击此处
AEM 6.5
本文

在AEM Forms 6.5中，主题是一个AEM客户端库，可使用它定义自适应表单的样式（外观）。 主题包含组件和面板的样式详细信息。 样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。在应用主题时，指定的样式会反映在相应的组件上。主题是独立管理的，无需引用自适应表单，并且可在多个自适应Forms中重复使用。

可用主题 available-theme

AEM 6.5环境为基于核心组件的自适应Forms提供了以下列出的主题：

了解主题的结构 understanding-structure-of-theme

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

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

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

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

    画布主题结构

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

创建主题

AEM Forms 6.5为基于核心组件的自适应Forms提供了以下列出的主题。

您可以自定义其中的任何主题以创建主题。

自定义主题 customize-a-theme-core-components-based-adaptive-forms

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

NOTE
  • 使用包管理器在所有Author和Publish实例上部署主题。
  • 主题客户端库与任何其他包一样，通过包管理器导入或导出。

自定义主题的先决条件 prerequisites

  • 为您的环境启用自适应Forms核心组件。

  • 安装Apache Maven的最新版本。 Apache Maven是常用于Java™项目的生成自动化工具。 安装最新版本可确保您具有主题自定义所需的依赖项。

  • 了解如何在Adobe Experience Manager🔗中创建客户端库。 AEM提供了客户端库，这使您可以在存储库中存储客户端代码，将其整理到不同类别中，并定义何时以及如何向客户端提供每种类别的代码。

  • 安装纯文本编辑器。 例如，Microsoft® Visual Studio Code。 使用Microsoft等纯文本编辑器®Visual Studio Code为编辑和修改主题文件提供了用户友好的环境。

  • 确保AEM Forms环境已启动并正在运行。

自定义主题的注意事项 consideration

  • 请确保您使用在您的环境中启用自适应Forms核心组件的Archetype项目来自定义主题。

  • 发布自适应表单时，不会在Publish实例上自动发布客户端库。 确保手动将在自适应表单中引用的客户端库发布到Publish环境。

  • Adobe建议不要更改客户端库的类名。

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

创建或自定义主题是一个多步骤过程。 按照列出的顺序执行步骤，以创建/自定义主题：

  1. 克隆主题
  2. 自定义主题的外观
  3. 为本地部署准备主题
  4. 在本地环境中部署主题
  5. 在生产环境中部署主题

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

1.克隆主题的Git存储库 clone-git-repo-of-theme

要克隆基于核心组件的自适应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

  3. 选择​ 信任父文件夹中所有文件的作者，并单击​ 是的，我信任作者。

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

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

您可以灵活地自定义各个组件，或使用主题的全局变量进行主题级别的更改。 修改全局变量会对所有单个组件产生级联效果。 例如，您可以使用全局变量更改自适应表单中所有组件的边框颜色，或为行动号召(CTA)按钮应用生动的填充颜色。 您可以：

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

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

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

  2. 更改任何属性的值。 例如，缺省错误颜色为红色。 要将错误颜色从红色更改为蓝色，请更改$error变量的颜色十六进制代码。 例如：$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. 根据您的要求更改任意的值。 例如，要将鼠标悬停时按钮组件的颜色更改为绿色，请将cmp-adaptiveform-button__widget:hover类中color: $white属性的值更改为十六进制代码#12b453或任何其他绿色阴影。 最终代码如下所示：

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

  3. 保存并关闭该文件。

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

3.准备好部署主题 generate-the-clientlib

要将主题部署到AEM实例，需要将其转换为客户端库。 按照以下步骤将主题转换为客户端库：

  1. 打开命令提示符或终端窗口。

  2. 导航到<your-theme-sources>文件夹。 例如，C:\aem-forms-theme-canvas

  3. 运行以下命令：

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    将[yourtheme]替换为自定义主题的名称。 例如，如果自定义主题的名称为customcanvastheme，请运行以下命令

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    成功执行该命令后，将在themerepo\theme-clientlibs\[yourtheme]处创建一个客户端库文件夹。

    客户端库生成

    客户端库位置

4.将主题部署在本地环境中 deploy-the-theme-on-a-local-environment

要将主题部署到本地开发或测试环境，请执行以下步骤：

  1. 将上一部分中创建的客户端库复制到原型项目中，路径如下：

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

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

  3. 导航到AEM Archetype项目的根目录，该项目用于启用自适应表单核心组件。

  4. 运行以下命令以在您的环境中部署自定义主题：

    mvn clean install

    客户端库生成

5.在生产环境中部署主题 deploy-theme

在本地开发环境中成功测试主题后，您可以继续将主题部署到生产环境，包括创作实例和Publish实例。 按照以下步骤在生产环境中部署主题：

  1. 登录到您的AEM环境。
  2. 打开包管理器。 默认URL为https://localhost:4502/crx/packmgr/index.jsp。
  3. 单击​ 上传包，然后单击​ 浏览。
  4. 导航到[AEM Archetype Project Folder]\all\target[appid].all-[version].zip并选择。 单击​ 打开。
  5. 单击“安装”。 在所有生产环境中重复该步骤。

安装包后，该主题可供选择。

主题客户端库

NOTE
如果您在访问发布实例的登录对话框以通过包管理器安装包时遇到困难，请尝试通过以下URL登录： http://[Publish Server URL]:[PORT]/system/console。 这允许访问Publish实例，允许您继续安装过程。

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

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

  1. 登录到本地AEM创作实例。

  2. 在 Experience Manager 登录页面上输入您的凭据。选择​ Adobe Experience Manager > Forms > Forms和文档。

  3. 单击​ 创建 > 自适应Forms。

  4. 选择自适应Forms核心组件模板，然后单击​ 下一步。 出现​ 添加属性

  5. 为自适应表单指定​ Name。

    note note
    NOTE
    • 默认情况下，选择adaptiveform.theme.canvas3主题。
    • 您可以从​ 主题客户端库 ​下拉菜单中选择其他主题。

  6. 单击​ 创建。

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

删除主题 delete-a-theme

要删除不使用的或不需要的主题，请执行以下操作：

  1. 登录您的创作实例。
  2. 打开http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. 导航到 apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme]。
  4. 删除主题文件夹并保存更改。

常见问题解答 faq

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

Ans： ​在主题和组件级别上同时定义样式时，在组件级别上定义的样式优先。

问： ​如果自定义主题在​ 主题客户端库 ​中不可见，应该执行哪些步骤？

Ans： ​如果您的自定义主题未出现在​ 主题客户端库 ​下拉列表中，请按照以下步骤操作：

  1. 导航到将自定义主题客户端库添加到的位置。 建议的路径为/ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>。

  2. 打开.content.xml文件并包含以下元数据：

    code language-none 
        formstheme:true
    allowproxy:true

  3. 保存文件并重新部署主题。

另请参阅

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2