使用主題來設定以核心元件為基礎的最適化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)可提供方便使用的環境,用於編輯和修改佈景主題檔案。

設定您的環境

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

自訂主題 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中開啟主題資料夾。 例如,在Visual Studio程式碼編輯器中開啟aem-forms-theme-canvas資料夾。

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

  3. 執行以下命令:

    code language-none
       code .
    

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

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

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

  5. 設定nameversion屬性的值。

    畫布布主題名稱變更影像

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

  7. 設定nameversion屬性的值。 請確定Package-lock.json檔案中的nameversion屬性值符合Package.json檔案中的值。

    畫布布主題名稱變更影像

  8. (選擇性)開啟ReadMe檔案進行編輯並更新佈景主題的名稱。

    畫布布主題名稱變更影像

  9. 儲存並關閉檔案。

設定主題名稱時的考量事項

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

3.自訂主題 customize-the-theme

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

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

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

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

  2. 變更任何屬性的值。 例如,預設的錯誤色彩為red。 若要將錯誤顏色從red變更為blue,請變更$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,請將cmp-adaptiveform-button__widget:hover類別中color: $white屬性的值變更為十六進位代碼#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中開啟主題資料夾。 例如,在Visual Studio程式碼編輯器中開啟aem-forms-theme-canvas資料夾。

  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中開啟主題資料夾。 例如,在Visual Studio程式碼編輯器中開啟aem-forms-theme-canvas資料夾。

  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
    • 您可以將單一存放庫用於多個主題。
    • 要部署不同的主題,您必須建立單獨的前端管道。
    • 例如,您可以使用相同的存放庫作為畫布主題、WKND主題和畫盤主題的custom-canvas-theme-repo。 但是,要部署主題,您需要建立單獨的前端管道。 使用相應的前端管道部署特定主題的未來自訂。
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. 選取​ 目標部署 > 前端計畫碼 ​選項,在
    Source程式碼 ​步驟。

  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. 在​ Source ​索引標籤中選取核心元件範本。

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

  6. 按一下​ 建立

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

最佳做法 best-practices

  • 從另一個主題中避免資產

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

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

  • 變更容器面板配置寬度

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

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

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

常見問題 faq

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

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

另請參閱 see-also

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