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

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

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

   git clone [Path of Git Repository of the theme]

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

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

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

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

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

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

运行以下命令：

   code .

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

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

设置name和version属性的值。

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

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

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

保存并关闭文件。

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

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

保存并关闭该文件。

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

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

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

保存并关闭该文件。

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

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

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

* **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

保存文件。

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

打开命令提示符或终端。

运行npm install以安装依赖项。

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

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

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

* **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

保存文件。

创建本地用户。

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

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

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

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

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

单击​ 保存。

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

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

打开命令提示符或终端。

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

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

例如：

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

登录到AEM Cloud Manager存储库。

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

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

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

单击​ 继续。

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

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

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

单击​ 保存。

管道设置完成后，会更新行动号召信息卡。

右键单击创建的管道。

单击​ 运行 。

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

选择​ Adobe Experience Manager > Forms > Forms和文档。

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

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

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

单击​ 创建。