建立或自訂最適化表單主題 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
檔案包含Adaptive Forms Button元件的樣式資訊。 -
src/resources
:此資料夾包含靜態檔案,例如圖示、標誌和字型。 這些資源用於增強主題的視覺元素和整體設計。
建立主題
AEM Forms 6.5提供下列核心元件型最適化Forms的主題。
您可以自訂這些主題的任何一個來建立主題。
自訂主題 customize-a-theme-core-components-based-adaptive-forms
自訂主題是指修改及個人化主題外觀的程式。 自訂主題時,您可以變更其設計元素、版面、顏色、印刷樣式,有時也會變更基礎程式碼。 這可讓您為網站或應用程式建立獨一無二的量身打造外觀,同時維持主題提供的基本結構和功能。
- 使用封裝管理員在所有Author和Publish執行個體上部署主題。
- 佈景主題使用者端程式庫會透過封裝管理員匯入或匯出,就像任何其他封裝一樣。
自訂主題的先決條件 prerequisites
-
安裝最新版的Apache Maven。 Apache Maven是常用於Java™專案的組建自動化工具。 安裝最新版本可確保您擁有佈景主題自訂的必要相依性。
-
瞭解如何在Adobe Experience Manager🔗中建立使用者端資料庫。 AEM提供使用者端程式庫,可讓您將使用者端程式碼儲存在存放庫中、將其組織成類別,並定義每個類別程式碼何時及如何提供給使用者端。
-
安裝純文字編輯器。 例如,Microsoft® Visual Studio Code。 使用純文字編輯器(例如Microsoft® Visual Studio Code)可提供方便使用的環境,用於編輯和修改佈景主題檔案。
-
確保AEM Forms環境正常運作。
自訂主題的考量事項 consideration
-
請確定您使用在您的環境中啟用Adaptive 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
您也可以選擇自訂特定Adaptive Form核心元件的字型、顏色、大小和其他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核心元件範本,然後按一下「下一步 」。 新增屬性 出現
-
指定最適化表單的 名稱。
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
-
儲存檔案並重新部署主題。