创建或自定义自适应表单主题 introduction-to-theme
在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
自定义主题是指修改和个性化主题外观的过程。 自定义主题时,您可以更改其设计元素、布局、颜色、排版规则,有时还会更改底层代码。 这样,您就可以为网站或应用程序创建独一无二的定制外观,同时保持主题提供的基本结构和功能。
- 使用包管理器在所有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.克隆主题的Git存储库 clone-git-repo-of-theme
要克隆基于核心组件的自适应Forms的主题,请选择以下主题之一:
执行以下说明以克隆主题:
-
在本地开发环境中打开命令提示符或终端窗口。
-
运行
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.自定义主题 customize-the-theme
您可以灵活地自定义各个组件,或使用主题的全局变量进行主题级别的更改。 修改全局变量会对所有单个组件产生级联效果。 例如,您可以使用全局变量更改自适应表单中所有组件的边框颜色,或为行动号召(CTA)按钮应用生动的填充颜色。 您可以:
设置主题级别样式 theme-customization-global-level
variable.scss
文件包含主题的全局变量。 通过更新这些变量,您可以在主题级别进行与样式相关的更改。 要应用主题级别的样式,请执行以下步骤:
-
打开
<your-theme-sources>/src/site/_variables.scss
文件进行编辑。 -
更改任何属性的值。 例如,缺省错误颜色为红色。 要将错误颜色从红色更改为蓝色,请更改
$error
变量的颜色十六进制代码。 例如:$error: #196ee5
。 -
保存并关闭该文件。
同样,您可以使用variable.scss
文件设置字体系列和类型、主题和字体颜色、字体大小、主题间距、错误图标、主题边框样式以及影响多个自适应表单组件的更多变量。
设置组件级别样式 component-based-customization
您还可以选择自定义特定自适应表单核心组件(如按钮、复选框、容器、页脚等)的字体、颜色、大小及其他CSS属性。 通过编辑与特定组件关联的CSS文件,您可以将其样式与组织的品牌保持一致。 要自定义组件的样式,请执行以下步骤:
-
打开文件
<your-theme-sources>/src/components/<component>/<component.scss>
进行编辑。 例如,要更改按钮组件的字体颜色,请打开<your-theme-sources>/src/components/button/button.scss
文件。 -
根据您的要求更改任意的值。 例如,要将鼠标悬停时按钮组件的颜色更改为绿色,请将
cmp-adaptiveform-button__widget:hover
类中color: $white
属性的值更改为十六进制代码#12b453或任何其他绿色阴影。 最终代码如下所示:code language-none .cmp-adaptiveform-button__widget:hover { background: $dark-gray; color: #12b453; }
-
保存并关闭该文件。
3.准备好部署主题 generate-the-clientlib
要将主题部署到AEM实例,需要将其转换为客户端库。 按照以下步骤将主题转换为客户端库:
-
打开命令提示符或终端窗口。
-
导航到
<your-theme-sources>
文件夹。 例如,C:\aem-forms-theme-canvas
-
运行以下命令:
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
要将主题部署到本地开发或测试环境,请执行以下步骤:
-
将上一部分中创建的客户端库复制到原型项目中,路径如下:
/ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>
-
打开命令提示符或终端。
-
导航到AEM Archetype项目的根目录,该项目用于启用自适应表单核心组件。
-
运行以下命令以在您的环境中部署自定义主题:
mvn clean install
5.在生产环境中部署主题 deploy-theme
在本地开发环境中成功测试主题后,您可以继续将主题部署到生产环境,包括创作实例和Publish实例。 按照以下步骤在生产环境中部署主题:
- 登录到您的AEM环境。
- 打开包管理器。 默认URL为
https://localhost:4502/crx/packmgr/index.jsp
。 - 单击 上传包,然后单击 浏览。
- 导航到
[AEM Archetype Project Folder]\all\target[appid].all-[version].zip
并选择。 单击 打开。 - 单击“安装”。 在所有生产环境中重复该步骤。
安装包后,该主题可供选择。
http://[Publish Server URL]:[PORT]/system/console
。 这允许访问Publish实例,允许您继续安装过程。将主题应用于自适应表单 using-theme-in-adaptive-form
将主题应用于自适应表单的步骤如下:
-
登录到本地AEM创作实例。
-
在 Experience Manager 登录页面上输入您的凭据。选择 Adobe Experience Manager > Forms > Forms和文档。
-
单击 创建 > 自适应Forms。
-
选择自适应Forms核心组件模板,然后单击 下一步。 出现 添加属性
-
为自适应表单指定 Name。
note note NOTE - 默认情况下,选择
adaptiveform.theme.canvas3
主题。 - 您可以从 主题客户端库 下拉菜单中选择其他主题。
- 默认情况下,选择
-
单击 创建。
创建自适应表单时,自适应表单主题用作自适应表单模板的一部分来定义样式。
删除主题 delete-a-theme
要删除不使用的或不需要的主题,请执行以下操作:
- 登录您的创作实例。
- 打开
http://[Publish Server URL]:[PORT]/crx/de/index.jsp
- 导航到
apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme]
。 - 删除主题文件夹并保存更改。
常见问题解答 faq
问: 在全局级别和组件级别的主题文件夹中进行自定义时,哪个自定义项优先?
Ans: 在主题和组件级别上同时定义样式时,在组件级别上定义的样式优先。
问: 如果自定义主题在 主题客户端库 中不可见,应该执行哪些步骤?
Ans: 如果您的自定义主题未出现在 主题客户端库 下拉列表中,请按照以下步骤操作:
-
导航到将自定义主题客户端库添加到的位置。 建议的路径为
/ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>
。 -
打开
.content.xml
文件并包含以下元数据:code language-none formstheme:true allowproxy:true
-
保存文件并重新部署主题。