使用主題來設定以核心元件為基礎的最適化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 ​索引標籤中選取核心元件範本。

在​ 樣式 ​索引標籤中選取主題。

按一下​ 建立。