文件AEM 6.5使用手冊

建立或自訂最適化表單主題 introduction-to-theme

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

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

在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

自訂主題是指修改及個人化主題外觀的程式。 自訂主題時，您可以變更其設計元素、版面、顏色、印刷樣式，有時也會變更基礎程式碼。 這可讓您為網站或應用程式建立獨一無二的量身打造外觀，同時維持主題提供的基本結構和功能。

NOTE
  • 使用封裝管理員在所有Author和Publish執行個體上部署主題。
  • 佈景主題使用者端程式庫會透過封裝管理員匯入或匯出，就像任何其他封裝一樣。

自訂主題的先決條件 prerequisites

  • 為您的環境啟用最適化Forms核心元件。

  • 安裝最新版的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. 原地複製主題
  2. 自訂佈景主題的外觀
  3. 準備好本機部署的主題
  4. 在本機環境中部署主題
  5. 在生產環境中部署主題

檔案中提供的範例是以​ 畫布 ​主題為基礎，但您可以複製任何主題，並使用相同的指示自訂主題。 這些指示適用於任何主題，可讓您根據特定需求修改主題。

1.複製主題的Git存放庫 clone-git-repo-of-theme

若要複製以核心元件為基礎的最適化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

  3. 選取​ 信任上層資料夾中所有文件的作者，並點選​ 是的，我信任作者。

成功執行命令後，您的電腦在aem-forms-theme-canvas資料夾中有可用的主題本機復本。

2.自訂主題 customize-the-theme

您可以彈性地自訂個別元件，或使用佈景主題的全域變數進行佈景主題層級的變更。 修改全域變數會對所有個別元件產生階層式效果。 例如，您可以利用全域變數來變更最適化表單中所有元件的邊框顏色，或對「號召性用語」(CTA)按鈕套用生動的填色顏色。 您可以：

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

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

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

  2. 變更任何屬性的值。 例如，預設的錯誤顏色為紅色。 若要將錯誤顏色從紅色變更為藍色，請變更$error變數的顏色十六進位代碼。 例如，$error: #196ee5。

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

  3. 儲存並關閉檔案。

同樣地，您可以使用variable.scss檔案來設定字型系列與型別、佈景主題與字型顏色、字型大小、佈景主題間距、錯誤圖示、佈景主題框線樣式，以及其他影響多個最適化表單元件的變數。

設定元件層級樣式 component-based-customization

您也可以選擇自訂特定Adaptive Form核心元件的字型、顏色、大小和其他CSS屬性，例如按鈕、核取方塊、容器、頁尾等。 透過編輯與特定元件相關聯的CSS檔案，您可以將其樣式與組織的品牌保持一致。 若要自訂元件的樣式，請遵循下列步驟：

  1. 開啟檔案<your-theme-sources>/src/components/<component>/<component.scss>進行編輯。 例如，若要變更按鈕元件的字型顏色，請開啟<your-theme-sources>/src/components/button/button.scss檔案。

  2. 根據您的需求變更任何的值。 例如，若要將滑鼠懸停時按鈕元件的顏色變更為綠色，請將cmp-adaptiveform-button__widget:hover類別中color: $white屬性的值變更為十六進位代碼#12b453或其他任何綠色陰影。 最終程式碼如下所示：

    code language-none 
     .cmp-adaptiveform-button__widget:hover {
 background: $dark-gray;
 color: #12b453;
 }

  3. 儲存並關閉檔案。

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

3.準備好部署主題 generate-the-clientlib

若要將主題部署至AEM執行個體，必須將其轉換為使用者端資料庫。 請依照下列步驟，將主題轉換為使用者端資源庫：

  1. 開啟命令提示字元或終端機視窗。

  2. 導覽至<your-theme-sources>資料夾。 例如 C:\aem-forms-theme-canvas

  3. 執行以下命令：

    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

若要將主題部署至本機開發或測試環境，請遵循下列步驟：

  1. 將上一節建立的使用者端資料庫複製到原型專案，路徑如下：

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. 開啟命令提示字元或終端機。

  3. 導覽至AEM Archetype專案的根目錄，此專案用於啟用最適化表單核心元件。

  4. 執行以下命令以在您的環境中部署自訂主題：

    mvn clean install

    使用者端程式庫組建

5.在您的生產環境中部署主題 deploy-theme

一旦您在本機開發環境中成功測試主題後，您就可以繼續將主題部署到您的生產環境，包括作者和Publish執行個體。 請依照下列步驟，將主題部署在生產環境中：

  1. 登入您的AEM環境。
  2. 開啟封裝管理員。 預設URL為https://localhost:4502/crx/packmgr/index.jsp。
  3. 按一下​ 上傳封裝，然後按一下​ 瀏覽。
  4. 瀏覽並選取[AEM Archetype Project Folder]\all\target[appid].all-[version].zip。 按一下​ 開啟。
  5. 按一下「安裝」。 在所有生產環境中重複此步驟。

安裝套件後，就可以選取主題。

佈景主題使用者端資料庫

NOTE
如果您在透過封裝管理員存取發佈執行個體的登入對話方塊時遇到困難，請嘗試透過下列URL登入： http://[Publish Server URL]:[PORT]/system/console。 這可讓您登入Publish執行個體，讓您繼續安裝程式。

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

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

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

  2. 在 Experience Manager 登入頁面上輸入您的認證。選取​ Adobe Experience Manager > Forms > Forms與檔案。

  3. 按一下​ 建立 > 最適化Forms。

  4. 選取最適化Forms核心元件範本，然後按一下「下一步​ 」。 新增屬性 ​出現

  5. 指定最適化表單的​ 名稱。

    note note
    NOTE
    • 依預設，已選取adaptiveform.theme.canvas3主題。
    • 您可以從​ 主題使用者端資料庫 ​下拉式功能表中選擇不同的主題。

  6. 按一下​ 建立。

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

刪除主題 delete-a-theme

若要移除未使用或不需要的主題：

  1. 登入您的作者執行個體。
  2. 開啟http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. 導覽至 apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme]。
  4. 刪除主題資料夾並儲存變更。

常問的問題 faq

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

Ans： ​當樣式同時定義於主題和元件層級時，會優先使用定義於元件層級的樣式。

問： ​如果自訂主題未顯示在​ 主題使用者端資料庫 ​中，應該採取哪些步驟？

Ans： ​如果您的自訂主題未出現在​ 主題使用者端資料庫 ​下拉式清單中，請遵循下列步驟：

  1. 導覽至您新增自訂主題使用者端資料庫的位置。 建議的路徑是/ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>。

  2. 開啟.content.xml檔案並包含下列中繼資料：

    code language-none 
        formstheme:true
    allowproxy:true

  3. 儲存檔案並重新部署主題。

另請參閱

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2