使用主題來設定以核心元件為基礎的最適化Forms的樣式 themes-for-af-using-core-components

版本
文章連結
AEM 6.5
按一下這裡
AEM as a Cloud Service
本文章

您可以建立並套用主題來設定最適化表單的樣式。 主題包含元件和面板的樣式詳細資訊。 樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。套用主題時,指定的樣式會反映在對應的元件上。主題是獨立管理,不需參照最適化表單,且可在多個最適化Forms中重複使用。

在本文中,我們瞭解如何使用主題來設計核心元件型最適化Forms的自訂外觀。

設定核心元件樣式的可用主題

Forms (如Cloud Service所提供)下列核心元件型最適化Forms的主題:

瞭解主題結構

主題是包含樣式元件的套件,例如CSS檔案、JavaScript檔案和定義最適化Forms樣式的資源(如圖示)。 最適化表單主題會依循特定組織,包含下列元件:

  • src/theme.scss:此資料夾包含對整個主題有廣泛影響的CSS檔案。 它是定義和管理佈景主題樣式和行為的集中位置。 透過編輯此檔案,您可以進行在整個主題中普遍套用的變更,這會影響最適化Forms和AEM Sites頁面的外觀和功能。

  • src/site:此資料夾包含套用至整個AEM網站頁面的CSS檔案。 這些檔案包含程式碼和樣式,會影響AEM網站頁面的整體功能和版面。 此處所做的任何修改會反映在您的網站的所有頁面中。 [何時使用?]

  • src/components:此資料夾中的CSS檔案是針對個別AEM核心元件所設計。 元件的每個專用資料夾都包含 .scss 在最適化表單中設定該特定元件樣式的檔案。 例如,/src/components/accordion/_accordion.scss檔案包含Adaptive 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)可提供方便使用的環境,用於編輯和修改佈景主題檔案。

設定您的環境

  • 啟用最適化Forms核心元件 適合您的本機開發和Cloud Service環境。
  • 設定 前端部署管道 適合您的Cloud Service環境。 或者,您可以稍後設定管道,讓您在設定部署管道之前,靈活地排定測試的優先順序並調整主題。

瞭解先決條件並設定開發環境後,您就可以開始根據特定需求自訂主題或設定主題樣式。

自訂主題 steps-to-customize-a-theme-core-components

自訂主題是多步驟的過程。 若要自訂主題,請依照列出的順序執行步驟:

檔案中提供的範例是根據 畫布 佈景主題,但請務必注意,您可以複製任何佈景主題,並使用相同的指示加以自訂。 這些指示適用於任何主題,可讓您根據特定需求修改主題。

讓我們從使用主題為您的核心元件型最適化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中開啟主題資料夾。 例如,若要開啟 aem-forms-theme-canvas Visual Studio程式碼編輯器中的資料夾。

  2. 導覽至 aem-forms-theme-canvas 檔案夾。

  3. 執行以下命令:

    code language-none
       code .
    

    以純文字編輯器開啟主題資料夾

    資料夾會在Visual Studio Code中開啟。

  4. 開啟 package.json 檔案進行編輯。

  5. 設定 nameversion 屬性。

    畫布布主題名稱變更影像

    note note
    NOTE
    • name屬性用於唯一識別主題,而指定的名稱會顯示在 樣式 的標籤 表單建立精靈.
    • 您可以選擇根據您的選擇為您的主題選取名稱,例如, mythemecustomtheme. 不過,在此案例中,我們已將名稱指定為 aem-forms-wknd-theme.
  6. 開啟 package-lock.json 檔案進行編輯。

  7. 設定 nameversion 屬性。 確定 nameversion 中的屬性 Package-lock.json檔案與 Package.json 檔案。

    畫布布主題名稱變更影像

  8. (可選)開啟 ReadMe 用於編輯和更新主題名稱的檔案。

    畫布布主題名稱變更影像

  9. 儲存並關閉檔案。

設定主題名稱時的注意事項

  • 強制移除 @aemforms 從主題名稱 Package.json 檔案和 Package-lock.json 檔案。 如果無法移除 @aemforms 從您的自訂主題名稱,這會導致在主題部署期間前端管道失敗。
  • 建議更新主題 versionPackage.json 檔案和 Package-lock.json 檔案來準確反映主題隨時間的變更和增強功能。
  • 如需有關使用、安裝指示和其他相關詳細資訊的重要資訊,建議更新 ReadMe 檔案。

3.自訂主題 customize-the-theme

您可以使用佈景主題的全域變數來自訂個別元件或進行佈景主題層級變更。 對全域變數所做的任何變更都會影響所有個別元件。 例如,您可以使用全域變數來變更最適化表單所有元件的邊框顏色,並使用明亮的填色顏色來設定使用按鈕元件的CTA (行動號召):

設定主題層級樣式 theme-customization-global-level

variable.scss 檔案包含佈景主題的全域變數。 透過更新這些變數,您可以在主題層級進行樣式相關的變更。 若要套用佈景主題層級樣式,請依照下列步驟進行:

  1. 開啟 <your-theme-sources>/src/site/_variables.scss 檔案進行編輯。

  2. 變更任何屬性的值。 例如,預設的錯誤顏色為 red. 若要變更錯誤顏色 redblue,變更的顏色十六進位代碼 $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

    在主題和元件層級同時定義樣式時,在元件層級定義的樣式會優先執行。

4.測試自訂主題 test-the-theme

若要預覽和測試本機環境中的變更,並根據不同AEM元件的需求自訂主題,請執行以下步驟:

4.1.設定本機環境以進行測試 rename-env-file-theme-folder
  1. 在IDE中開啟主題資料夾。 例如,開啟 aem-forms-theme-canvas Visual Studio程式碼編輯器中的資料夾。

  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.scssbutton.scss 檔案時,伺服器會自動挑選變更並預覽最新輸出。 直線 [Browsersync] File event [change] 表示伺服器已辨識出最新的變更,而且正在部署本機環境的變更。

Proxy browsersync

在主題層級和元件層級遵循用於自訂主題的最適化表單(核心元件)的樣式設定範例後,最適化表單的錯誤訊息將變更為 blue 顏色,而按鈕元件的標籤顏色會變更為 green 游標停留時。

預覽主題層級樣式

範例:錯誤顏色設定為藍色

預覽元件層級樣式

範例:將游標停留顏色設定為綠色

自訂主題有助於根據組織需求,設計核心元件型最適化Forms的自訂外觀。

測試Cloud Service環境中託管的表單主題

您也可以測試AEM Formsas a Cloud Service執行個體上託管的最適化表單主題。 若要使用雲端例項上託管的Adaptive Forms來設定和設定本機環境以測試主題,請執行以下步驟:

  1. 在IDE中開啟主題資料夾。 例如,開啟 aem-forms-theme-canvas Visual Studio程式碼編輯器中的資料夾。

  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主題和畫盤主題。 但是,要部署主題,您需要建立單獨的前端管道。 使用相應的前端管道部署特定主題的未來自訂。
5.2.將變更推送至存放庫 committing-the-changes

現在,將變更推送到AEM FormsCloud 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. 選取 目標部署 > 前端計畫碼 選項,在 原始碼 步驟。

  7. 選取 存放庫Git分支 具有您最新變更的值。 例如,此處選取的存放庫名稱為 custom-canvas-theme-repo Git分支為 main.

  8. 選取 程式碼位置 作為 /,如果您的變更位於根資料夾中。

  9. 按一下「儲存」。
    建立前端管道

    管道設定完成後,會更新行動號召卡。

  10. 以滑鼠右鍵按一下已建立的管線。

  11. 按一下 執行 .

    執行管道

建置完成後,主題即可在製作例項上使用。 它會顯示在 樣式 索引標籤建立最適化表單時,使用最適化表單建立精靈中的這個索引標籤。

樣式標籤下可用的自訂主題

自訂主題有助於建立核心元件型Adaptive Forms的品牌體驗。

將主題套用至最適化表單 using-theme-in-adaptive-form

將主題套用至最適化表單的步驟如下:

  1. 登入您的AEM Forms作者執行個體。

  2. 選取 Adobe Experience Manager > Forms > Forms與檔案.

  3. 按一下 建立 > 最適化Forms. 建立最適化表單的精靈隨即開啟。

  4. 選取中的核心元件範本 來源 標籤。

  5. 選取中的主題 樣式 標籤。

  6. 按一下​ 建立

最適化表單主題用於最適化表單範本的一部分,以便在建立最適化表單時定義樣式。

最佳做法 best-practices

  • 避免使用其他主題的資產

    編輯主題時,您可以瀏覽並從其他主題新增資產(例如影像)。 例如,您正在編輯頁面的背景。 例如,當您選取 頁面 編輯按鈕 > 背景 > 新增 > 影像,您會看到一個對話方塊,可讓您瀏覽並新增其他主題中的影像。

    如果從其他主題新增資產,且移動或刪除了其他主題,您可能會遇到目前主題的問題。 建議您避免瀏覽和從其他主題新增資產。

  • 變更容器面板配置寬度

    不建議變更容器面板配置寬度。 當您指定容器面板的寬度時,其會變成靜態,且無法適應不同的顯示。

  • 使用表單編輯器或主題編輯器來處理頁首和頁尾

    如果要使用字型樣式、背景和透明度等樣式選項來設定頁首和頁尾的樣式,請使用主題編輯器。
    如果您想在頁首中提供標誌影像、公司名稱以及頁尾的版權資訊等資訊,請使用表單編輯器選項。

常見問題 faq

問: 在全域和元件層級的主題資料夾中進行自訂時,哪個自訂專案優先?

Ans: 在全域和元件層級進行自訂時,優先採用元件層級的自訂。

另請參閱 see-also

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