建立和使用主題

上次更新: 2023-12-21

Adobe 建議使用新式且可擴充的資料擷取核心元件,用來建立新的最適化表單將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步,可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

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

簡介

您可以建立並套用主題,使最適化表單或互動式通訊風格化。 主題包含元件和面板的樣式詳細資訊。 樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。當您套用主題時,指定的樣式會反映在相應的元件上。 主題可獨立管理,不需參考最適化表單或互動式通訊。

您可以:

  • 建立主題
  • 編輯和複製現有主題
  • 下載現有佈景主題並上傳至AEM Forms伺服器
  • 管理佈景主題的相依性

建立、下載或上傳主題

透過AEM Forms,您可以建立、下載或上傳主題。 主題會像其他資產(如表單、檔案和信件)一樣建立。 主題會儲存為單獨的實體,並以表單等中繼屬性完成。 主題是獨立的實體,可讓您在多個最適化表單和互動式通訊中重複使用。 您也可以將主題移動至不同的AEM Forms例項,並重複使用它。

建立主題

執行以下步驟來建立主題:

  1. 按一下 Adobe Experience Manager,按一下 Forms,然後按一下 主題.

  2. 在「主題」頁面中,按一下 建立>主題.
    建立主題的精靈隨即啟動。

  3. 在建立佈景主題精靈的基本標籤中,提供 標題名稱 佈景主題的。 這些是必填欄位。

  4. 在「進階」標籤中,您會取得兩個欄位:

    • Clientlib位置:存放庫中儲存主題的clientlibs的位置。

    • Clientlib類別:提供文字欄位來輸入主題的clientlib類別名稱。

  5. 按一下 建立 然後按一下 編輯 以開啟主題編輯器中的主題,或按一下 完成 以返回「主題」頁面。

下載主題

您可以將主題匯出為zip檔案,並用於其他專案或AEM例項。 若要下載佈景主題:

  1. 按一下 Adobe Experience Manager,按一下 Forms,然後按一下 主題.

  2. 在「佈景主題」頁面中, 選取 主題,然後按一下 下載. 隨即顯示包含主題詳細資訊的對話方塊。

  3. 按一下 下載. 主題會下載為zip檔案。

注意

如果您下載的主題有關聯的最適化表單和相關聯的最適化表單是以自訂範本為基礎,則也下載自訂範本。 將下載的主題和最適化表單上傳到AEM Forms伺服器時,也要上傳相關的自訂範本。

上傳主題

您可以在專案中將已建立的主題與樣式預設集搭配使用。 您可以將其他人建立的主題套件上傳到您的專案中,藉此匯入這些套件。

上傳佈景主題:

  1. 按一下 Adobe Experience Manager,按一下 Forms,然後按一下 主題.

  2. 在「主題」頁面中,按一下 建立>檔案上傳.

  3. 在「檔案上傳」提示中,瀏覽並選取電腦上的佈景主題套件,然後按一下 上傳.
    上傳的主題可在主題頁面中使用。

主題的中繼資料

佈景主題的中繼屬性清單(可在佈景主題的屬性頁面中找到)。

ID

名稱 可以編輯 屬性說明
1. 標題 主題的顯示名稱。
2. 說明 佈景主題的說明。
3. 類型
  • 資產型別。
  • 值一律為主題。
4. 建立日期 佈景主題建立日期
5. 作者名稱 主題的作者。 在建立佈景主題時計算。
6. 上次修改日期 上次修改主題的日期。
7. 狀態 主題的狀態(已修改/已發佈)。
8. 準時發佈 自動發佈佈景主題的時間。
9. 發佈關閉時間 自動取消發佈佈景主題的時間。
10. 標記 附加至用於識別的主題的標籤,用於改善搜尋。
11. 參考 連結
  • 包含「Referred by」區段。 列出使用主題的表單。
  • 由於主題未參照任何其他資產,因此沒有「參照」區段。
12. Clientlib 位置
  • 「/etc」中儲存與此主題相對應的clientlibs的使用者定義存放庫路徑。
  • 預設值 — '/etc/clientlibs/fd/themes' +主題資產的相對路徑。
  • 如果該位置不存在,則會自動產生資料夾階層。
  • 此值變更時,clientlib節點結構會移至輸入的新位置。
    注意: 如果您變更預設的clientlib位置,請在CRXDE存放庫指派中 crx:replicate, rep:write, rep:glob:*, rep:itemNames:: js.txt, jcr:read forms-userscrx:replicatejcr:read fd-service 在新位置。 另外透過新增來附加另一個ACL deny jcr:addChildNodesforms-user
13. Clientlib 類別名稱
  • 此主題的使用者定義clientlib類別名稱。
  • 如果名稱已由其他現有主題使用,則會顯示錯誤。
  • 預設值 — 使用佈景主題位置計算。
  • 此值變更時,會在對應的clientlib節點上更新類別名稱。 不需要更新jsp檔案中的Clientlib類別名稱,因為參考會使用clientlib類別名稱。

關於主題編輯器

AEM Forms隨附主題編輯器。 這是對業務使用者和網頁設計人員/開發人員友好的介面,提供輕鬆指定各種最適化表單和互動式通訊元素樣式所需的功能。 當您建立主題時,它會儲存為單獨的實體,例如表單、互動式通訊、字母、檔案片段和資料字典。

主題編輯器可讓您自訂主題中樣式化元件的樣式。 您可以自訂表單或互動式通訊在裝置上的外觀。

主題編輯器分為兩個面板:

  • 畫布 — 顯示在右側。 它會顯示最適化表單或互動式通訊的範例,其中所有樣式變更都會立即反映。 您也可以直接從畫布中選取物件,以查詢與物件相關聯的樣式,並編輯這些樣式。 上方的裝置解析度尺標可控制畫布。 從尺標選取解析度中斷點,會顯示範例表單的預覽或個別解析度的互動式通訊。 畫布將詳細說明 以下.

  • 側欄 — 顯示在左側。 它有下列專案:

    • 選取器: 顯示為樣式化選取的元件,以及您可以樣式化的元件屬性。 選取器代表某個型別的所有元件。 如果您在樣式設定時選取主題中的文字方塊元件,則表單或互動式通訊中的所有文字方塊都會繼承樣式。 選取器可讓您選取一般元件或特定元件來設定樣式。 例如,欄位元件是類屬元件,而文字方塊是特定元件。

      樣式化一般元件:
      欄位可以是數值方塊欄位(如年齡)或文字方塊欄位(如地址)。
      當您設定欄位樣式時,所有欄位(例如年齡、姓名、地址)都會設定樣式。

      樣式特定元件:特定元件會影響特定類別的物件。 當您在主題中設定數值方塊元件的樣式時,只有中的數值方塊物件會繼承樣式。

      例如,文字方塊欄位(如地址)的長度較長,而數值方塊欄位(如年齡)的長度較短。 您可以選取數值方塊欄位、縮短其長度並套用至您的表單。 表格中所有數值方塊欄位的寬度都會縮小。

      當您使用特定的背景顏色自訂所有欄位元件時,所有欄位(例如年齡、名稱和地址)都會繼承背景顏色。 當您選取數值方塊(例如年齡)並縮小其寬度時,所有數值方塊(例如年齡)的寬度都會縮小,家庭中的人數也會減少。 文字方塊的寬度不會變更。

    • 狀態: 可讓您自訂處於特定狀態的物件樣式。 例如,您可以指定物件在預設、焦點、停用、暫留或錯誤狀態時的外觀。

    • 屬性類別: 樣式屬性分為不同的類別。 例如,Dimension和位置、文字、背景、邊框和效果。 在每個類別下,您都會提供樣式資訊。 例如,在「背景」底下,您可以提供「背景顏色」和「影像與漸層」。

    • 進階: 可讓您將自訂CSS新增至物件,以覆寫視覺控制項定義是否有重疊的屬性。

    • 檢視CSS:可讓您檢視所選元件的CSS

    此外,在側邊欄中,底部會顯示箭頭。 按一下箭頭時,您會取得兩個其他選項: 模擬成功模擬錯誤。 我們將詳細討論這些選項以及上述選項 以下.

反白顯示邊欄和畫布的主題編輯器。 答: 側欄 B. 畫布

樣式化元件

您可以在多個最適化表單和互動式通訊中使用主題,這會匯入您在主題中指定的元件格式。 您可以設定各種元件的樣式,例如標題、說明、面板、欄位、圖示和文字方塊。 使用Widget來設定主題中的元件屬性。 您不一定要具備CSS或LESS的先前知識,但是需要,不過CSS覆寫區段可讓您撰寫CSS程式碼或提供自訂選取器。 在側邊欄中選取元件時,CSS覆寫區段隨即顯示。

側欄中的可設定樣式的元件

側邊欄中的選項,可讓您選取不同元件並設定其樣式。

按一下側邊欄中某個元件的編輯按鈕,可選取畫布中的元件,並讓您使用側邊欄中的選項來設定元件樣式。

文字方塊、數值方塊、選項按鈕和核取方塊等特定元件會歸類在「欄位」等類屬元件下。 例如,您想要自訂選項按鈕的樣式。 若要選取樣式設定選項按鈕,請選取 欄位> Widget >選項按鈕.

按一下 全部展開 在側邊欄中,檢視、選取和樣式化前端未顯示的已分類元件。

樣式面板配置

AEM Forms中的主題支援您的表單和互動式通訊中面板版面配置元素的樣式。 現成可用的版面和自訂版面中的元素樣式受到支援。

現成可用的面板包括:

  • 左側的索引標籤

  • 頂端標籤

  • 折疊面板

  • 回應式

  • 精靈

  • 行動佈局

    • 標題中的面板標題
    • 標題中沒有面板標題

選擇器會因每個版面配置而異。
從主題編輯器設定自訂配置樣式涉及:

  • 為可設定樣式的版面定義元件,以及用來唯一識別這些元件的CSS選取器
  • 定義可套用至這些元件的CSS屬性
  • 從使用者介面以互動方式定義這些元件的樣式

不同熒幕大小的不同樣式

桌上型電腦和行動版面可有稍微不同或完全不同的樣式。 對於行動裝置,平板電腦和手機除了元件大小外,其他版面配置都類似。

使用主題編輯器中斷點來定義不同熒幕大小的替代樣式。 您可以選取要在其上開始建立佈景主題的基本裝置或解析度,系統會自動產生其他解析度的樣式變化。 您可以明確修改所有解析度的樣式。

注意

主題會先使用表單或互動式通訊建立,然後套用至不同的表單或互動式通訊。 建立佈景主題時使用的中斷點,可能與套用佈景主題的表單或互動式通訊不同。 CSS媒體查詢是以主題建立中所使用的表單或互動式通訊為基礎,而不是以套用主題的表單或互動式通訊為基礎。

選取物件時,側邊欄中的樣式屬性前後關聯變更

在「畫布」中選取元件時,其樣式屬性會列在側邊欄中。 選取物件型別及其狀態,然後提供其樣式。

主題編輯器中最近使用的樣式

主題編輯器會快取套用至元件的最多10個樣式。 您可以將快取樣式與主題的其他元件搭配使用。 側邊欄中選取元件的正下方會顯示最近使用的樣式清單。 最初,最近使用的樣式清單是空的。

asset-library

當您設定元件樣式時,會快取樣式並將樣式列在清單方塊中。 在此範例中,文字方塊的標籤會設定為變更字型大小和顏色。 您可以依照類似的步驟選擇影像或變更顏色來設定元件的樣式。 當欄位標籤樣式變更時,觀察樣式如何快取並列在清單方塊中。

為可用於其他元件的快取字型樣式

在此範例中,欄位標籤的樣式已變更,而且當為樣式選取回應式面板說明時,清單專案會新增到資產庫中。 資產庫中的專案可用來變更回應式面板說明的樣式。

將樣式新增至資產庫時,該樣式可用於其他主題和 樣式模式 表單編輯器或互動式通訊編輯器UI的。 同樣地,當您使用表單編輯器或互動式通訊編輯器UI的樣式模式來設定元件的樣式時,該樣式會快取,並可在主題中使用。

資產庫的加號按鈕可讓您以提供的名稱永久儲存樣式。 即使您未按一下側邊欄中的「儲存」按鈕來將樣式套用至元件,加號按鈕也會儲存樣式。 樣式模式中無法使用加號按鈕來儲存樣式以供稍後使用。

提供資產資料庫的自訂樣式名稱

當您提供樣式的自訂名稱時,該樣式會繫結至主題,且無法再用於其他主題。 若要刪除已儲存的樣式:

  1. 在「畫布」工具列上,按一下 主題選項 theme-options > 管理樣式.

  2. 在「管理樣式」對話方塊中,選取已儲存的樣式,然後按一下 刪除.

    刪除儲存的樣式

即時預覽、儲存和捨棄變更

在樣式中進行的修改會立即反映在畫布中載入的表單或互動式通訊中。 即時預覽可讓您以互動方式定義並檢視樣式的影響。 當您變更元件的樣式時, 完成 在側欄中啟用按鈕。 若要保留變更,請使用 完成 按鈕。

注意

在欄位中輸入無效字元時,欄位邊界顏色會變更為紅色,並在熒幕左上角顯示錯誤訊息。 例如,如果在接受數字字元作為輸入的文字方塊中輸入字母,則輸入方塊的邊界顏色會變更為紅色。 如果不解決頂部顯示的錯誤,就無法儲存此類主題。

使用其他最適化表單或互動式通訊的主題

當您建立佈景主題時,會使用佈景主題編輯器隨附的表單來建立。 您可以在此表單中提供元件的樣式。 您可以選取您選擇的表單或互動式通訊,以提供樣式並預覽其結果,而不是主題編輯器隨附的表單。

若要取代主題編輯器畫布中的目前表單或互動式通訊:

  1. 在主題編輯器面板中,按一下 主題選項 theme-options > 設定.

  2. 在一般索引標籤中,瀏覽並選取表單或互動式通訊 最適化表單/檔案 欄位。

重做/還原

您可以還原或重做意外發生的不想要的變更。 使用「畫布」中的重做/復原按鈕。

重做和還原動作

「畫布」中的「還原/重做」按鈕

在主題編輯器中設定元件樣式時,會顯示重做/復原按鈕。

使用主題編輯器

主題編輯器可讓您編輯您建立或上傳的主題。 瀏覽至 Forms與檔案>主題,然後選取主題並開啟。 主題會在主題編輯器中開啟。

如上所述,主題編輯器有兩個面板:側欄和畫布。
theme-editor

在主題編輯器中自訂文字方塊Widget元件的成功狀態樣式。 元件在「畫布」中選取,其狀態在側欄中選取。 側邊欄中可用的樣式選項可用來自訂元件的外觀。

使用畫布

主題是使用現成可用的表單,或使用您選擇的表單或互動式通訊來建立。 畫布會顯示表單或互動式通訊的預覽,這些通訊用於使用主題中指定的自訂來建立主題。 表單上方的尺標是用來根據裝置的顯示大小決定版面。

在「畫布」工具列中,您會看到:

  • 切換側面板 切換側面板:可讓您顯示或隱藏側欄。

  • 主題選項 theme-options:提供三個選項

    • 設定:提供選項以選取預覽表單或互動式通訊、基礎clientlib和Adobe Fonts設定。
    • 檢視主題CSS:為所選主題產生CSS。
    • 管理樣式:提供管理文字和影像樣式的選項
    • 說明:執行主題編輯器的影像導覽。
  • 模擬器 尺標:模擬不同顯示大小的主題外觀。 在模擬器中將顯示大小視為中斷點。 您可以選取中斷點並為其指定樣式。 例如,桌上型電腦和平板電腦是兩個中斷點。 您可以為每個中斷點指定不同的樣式。

當您在畫布中選取元件時,您會看到其上方的元件工具列。 元件工具列可讓您選取元件,或切換到類屬元件。 例如,在面板中選取數值文字方塊。 您會在元件工具列中看到下列選項:

  • 數值方塊Widget:可讓您選取元件以自訂其在側邊欄中的外觀。

  • 欄位Widget:可讓您選取樣式的一般元件。 在此範例中,會選取所有文字輸入元件(文字方塊/數值方塊/數值步進器/日期輸入)來設定樣式。

  • 欄位層級:可讓您切換至一般元件以便設定樣式。 如果您選取數值方塊並選取此圖示,則會選取欄位元件。 如果您選取欄位元件並選取此圖示,則會選取面板。 如果您持續點選此圖示以進行選取,您最後會選取樣式的配置。

注意

元件工具列中的可用選項會因您選取的元件而異。

元件工具列

「畫布」中數值方塊上的元件工具列

使用側欄

主題編輯器中的側邊欄提供自訂主題中元件樣式的選項,並使用選取器。 選取器可讓您選取一組元件或個別元件,並可在側邊欄中搜尋選取器。 您可以編寫自訂元件的選取器。

當您從側欄的畫布或選取器中選取元件時,側欄會顯示可讓您自訂其樣式的所有選項。
以下是您在選取元件時於側邊欄中看到的選項:

  • 狀態
  • 特性表
  • 模擬錯誤/成功

狀態

狀態是使用者與元件互動的指標。 例如,當使用者在文字方塊中輸入錯誤資料時,文字方塊的狀態會變更為錯誤狀態。 主題編輯器可讓您指定特定狀態的樣式。

自訂狀態樣式的選項會因不同元件而異。

特性表

屬性 使用

尺寸及位置

可讓您在主題中樣式對齊、大小、定位和放置元件。

您的選項包括顯示設定、內距、邊界、寬度、高度和Z索引。

您也可以使用佈局模式,透過簡單的拖放介面來定義元件的寬度。 如需詳細資訊,請參閱 使用版面模式調整元件大小.

文字

可讓您自訂主題元件中的文字樣式。

例如,您想要變更在文字方塊中輸入文字的外觀。

您的選項包括字型系列、粗細、顏色、大小、行高、文字對齊、字母間距、文字縮排、底線、斜體、文字轉換、垂直對齊、基線和方向。

背景

可讓您使用影像或顏色來填滿元件的背景。

邊框

可讓您選擇元件的邊框外觀。 例如,您想要文字方塊具有深紅色、厚邊框和虛線。

您的選項包括邊框寬度、樣式、半徑和顏色。

效果

可讓您為元件加入特殊效果,例如不透明度、混成模式和陰影。

進階

可讓您新增:

  • 屬性 ::before::after 虛擬元素,在選取器中的預設內容之後或之前新增內容,並設定其樣式。
    另請參閱 CSS虛擬元素.
  • 自訂CSS程式碼內嵌至元件並寫入自訂選取器。

新增自訂CSS程式碼時,它會覆寫您使用側邊欄中的選項新增的自訂。

模擬錯誤/成功

側邊欄底部提供「模擬錯誤」和「成功」選項。 您可以使用側邊欄底部的顯示/隱藏箭頭來檢視它們。 使用主題編輯器,您可以設定元件的各種狀態的樣式。

例如,您在表單中新增數值欄位,並在主題編輯器中指定其樣式。 當使用者在欄位中輸入英數字元值時,您想要變更文字方塊的背景顏色。 您可以選取主題中的數值欄位,並使用側邊欄中的狀態選項。 在側邊欄中選取「錯誤」狀態,然後將背景顏色變更為紅色。 若要預覽行為,您可以使用側邊欄中可用的模擬錯誤選項。 「模擬錯誤」和「成功」選項詳細說明如下:

  • 模擬成功:可讓您檢視指定成功狀態樣式的元件外觀。 例如,在表單中,客戶設定密碼。 使用者可以根據您提供的准則設定密碼。 當使用者按照您提供的所有准則輸入密碼時,文字方塊會變成綠色。 當文字方塊變成綠色時,它就會處於成功狀態。 您可以指定處於成功狀態的元件的樣式,並使用「模擬成功」選項來模擬其外觀。

  • 模擬錯誤:讓您檢視元件(如果您為錯誤狀態指定其樣式)的外觀。 例如,在表單中,客戶設定密碼。 使用者可以根據您提供的准則設定密碼。 當使用者鍵入的密碼未遵循您提供的所有准則時,文字方塊會變成紅色。 當文字方塊變成紅色時,它就會處於錯誤狀態。 您可以為處於錯誤狀態的元件指定樣式,並使用「模擬錯誤」選項來模擬其外觀。

設定元件樣式

例如,在您的表單中,您有兩個型別的文字方塊:一個僅接受數值,另一個接受英數字元。 您可以自訂只接受數值的文字方塊(數值方塊)的樣式。

執行以下步驟來自訂特定元件(此範例中的數值方塊)的樣式:

  1. 在主題編輯器中,選取畫布中的數值方塊。

  2. 當您選取數值方塊時,您可以看到包含三個選項的元件工具列:

    • 數值方塊Widget
    • 欄位Widget 欄位層級
  3. 選取 數值方塊Widget.

  4. 側欄標題會變更為數值方塊Widget,並顯示自訂其外觀的選項。
    使用 Dimension與位置 側邊欄中的選項,用來自訂元件的大小。 確定州為 預設.

不要選取 數值方塊Widget,選取 欄位Widget ,然後執行上述步驟。 當您選取的維度時 欄位Widget 選項,除了數字方塊之外,所有文字方塊的大小都相同。

指定狀態的樣式欄位

使用元件工具列,您還可以指定不同狀態的元件樣式。 例如,如果元件已停用,則會處於已停用狀態。 您可以在主題編輯器中樣式化的元件常用狀態為:預設、焦點、已停用、錯誤、成功和暫留。 您可以在「畫布」中選取元件,並使用側邊欄中的「狀態」選項來自訂其外觀。

執行以下步驟,自訂處於特定狀態的元件的樣式:

  1. 在「畫布」中選取元件,然後從元件工具列選取適當的選項。
    側邊欄會顯示自訂元件樣式的選項。
  2. 在側邊欄中選取狀態。 例如,「錯誤」狀態。
  3. 使用選項,例如 邊框,背景 ,以自訂元件的外觀。
  4. 使用 模擬錯誤 側邊欄底部的選項,以檢視樣式在編輯時的外觀。

當您在指定元件的狀態之後自訂其樣式時,只會針對指定的狀態顯示元件的自訂。 例如,如果在選取懸停狀態時自訂元件的樣式。 當您將指標移到已轉譯表單中的元件上或套用主題的互動式通訊上時,元件的自訂功能就會出現。

若要模擬錯誤和成功以外的狀態行為,請使用預覽模式。 若要使用預覽模式,請按一下 預覽 在頁面工具列中。

較小顯示器的樣式配置

使用畫布中的尺標,為顯示較小的裝置選取中斷點。 按一下模擬器 尺標 在畫布中檢視尺標和中斷點。 中斷點可讓您預覽適用於不同裝置(例如手機和平板電腦)之顯示大小的表單或互動式通訊。 主題編輯器支援多種顯示大小。

若要為不同的中斷點設定元件的樣式:

  1. 在「畫布」中,選取尺標上方的中斷點。
    中斷點代表行動裝置及其顯示大小。
  2. 使用側邊欄,針對選取的顯示大小,自訂主題中表單或互動式通訊元件的樣式。
  3. 確保已儲存自訂。

您可以為多個裝置設定表單或互動式通訊元件的樣式。 桌上型電腦和行動裝置的表單和互動式通訊元件可能有完全不同的樣式。

在主題中使用網頁字型

您現在可以在最適化表單或互動式通訊中使用網頁服務中提供的字型。 開箱即用, Adobe FontsAdobe的Web字型服務)可作為設定使用。 若要使用Adobe Fonts,請建立套件、在其中新增字型,然後從取得套件ID Adobe Fonts.

執行以下步驟,在AEM中設定Adobe Fonts:

  1. 在作者執行個體中,按一下 adobeexperiencemanagerAdobe Experience Manager >工具 錘子 >部署>Cloud Service。

  2. Cloud Service 頁面,導覽至並開啟 Adobe Fonts 選項。 開啟設定資料夾,然後按一下 建立.

  3. 建立設定 對話方塊,指定設定的標題,然後按一下 建立.

    系統會將您重新導向至設定頁面。

  4. 在出現的「編輯元件」對話方塊中,提供您的Kit ID並按一下 確定.

執行以下步驟來設定主題以使用Adobe Fonts設定:

  1. 在作者執行個體上,在主題編輯器中開啟主題。

  2. 在主題編輯器中,導覽至 主題選項 theme-options > 設定.

  3. Adobe Fonts設定 欄位,選取套件,然後按一下 儲存.

    現在,您可以看到字型已加入佈景主題的font-family屬性中。

在主題編輯器中列出及選取字型

您可以使用主題設定服務來新增更多字型到主題編輯器。 執行以下步驟來新增字型:

  1. 以管理許可權登入AEM Web Console。 AEM Web主控台的URL為 https://'[server]:[port]'/system/console/configMgr.

  2. 開啟 最適化表單主題設定服務.

    theme-config

  3. 按一下+,指定字型名稱,然後按一下 儲存. 字型已新增,並可在主題編輯器中使用。

在主題編輯器中選取字型

您可以使用+按鈕來新增字型。 新增字型時,它會列在側邊欄中。

主題編輯器中列出的新字型

除了主題組態選項之外,您也可以從主題編輯器本身新增字型。 在側邊欄下的字型系列欄位中輸入您要使用的字型,然後按鍵盤上的返回鍵。

在主題編輯器中輸入和選取字型

當您選取字型時,它會新增到字型系列清單下。 您可以使用主題編輯器中的「遮色片」選項來停用或啟用列出的字型。

多字型

您可以看到元件字型變更。

「字型系列」欄位支援多種字型。 當您鍵入字型時,瀏覽器會尋找該字型並將其套用至所選取的元件。 如果瀏覽器找不到字型,就會在系列中尋找其旁邊的字型。 您可以先輸入您要尋找的特定字型。 如果您找不到要使用的字型,可以在系列中鍵入類屬字型並使用它。

套用至主題編輯器的遮色片樣式

您可以遮罩套用在佈景主題中的樣式。 在主題編輯器側邊欄中,您可以使用 toggle_eye圖示可停用套用的樣式。 例如,如果您在表單或互動式通訊中變更元件的尺寸,則可以使用屬性左側的遮罩按鈕來停用它。 儲存佈景主題時,會保留選取的遮色片選項。

主題編輯器側邊欄中可用的遮色片選項

下列範例顯示主題中遮色和未遮色的樣式。

遮色和未遮色的樣式

將主題套用至表單或互動式通訊

若要將主題套用至最適化表單:

  1. 在編輯模式中開啟您的表單。 若要以編輯模式開啟表單,請選取表單並按一下 開啟.

  2. 在編輯模式中,選取元件,然後按一下 欄位層級 > 最適化表單容器,然後按一下 cmppr.

    您可以在側邊欄中編輯表單的屬性。

  3. 在側邊欄中,按一下 樣式.

  4. 從中選擇您的主題 最適化表單主題 下拉式清單,然後按一下 完成 勾選按鈕.

若要將主題套用至互動式通訊:

  1. 以編輯模式開啟互動式通訊。 若要以編輯模式開啟互動式通訊,請選取表單並按一下 開啟.

  2. 在編輯模式中,選取元件,然後按一下 欄位層級 >檔案容器,然後按一下 cmppr.

    您可以在側邊欄中編輯表單的屬性。

  3. 在側邊欄中的下方 基本,從中選擇您的主題 主題 下拉式清單,然後按一下 完成 勾選按鈕

在執行階段變更表單主題

佈景主題會設定表單中不同元件的樣式。 您可以使用 themeOverride 屬性以動態變更表單主題。 表單的典型URL為:

https://<server>:<port>/content/forms/af/test.html

您可以使用themeOverride引數在執行階段套用主題。

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

themeOverride 選項可讓您提供佈景主題的路徑。 它會變更表單的主題,並以更新的樣式重新整理表單。

使用主題取得特定外觀

使用AEM Forms以及預設的現成畫布主題,還有許多其他主題。 如果您要使用其他主題來設計表單或互動式通訊,以及其他變更,請從「主題資料庫」資料夾複製主題。 將複製的主題貼到Theme Library資料夾之外,並根據您想要的變更來編輯複製的主題。

若要複製主題,請執行下列步驟:

  1. 在製作例項中,導覽至 Adobe Experience Manager > Forms >主題.
  2. 開啟「主題資料庫」資料夾。
  3. 在「佈景主題資料庫」資料夾中,將指標暫留在對應的現成佈景主題上,然後選取 複製.
  4. 將複製的主題貼到「主題庫」資料夾外。
  5. 自訂複製的主題。

自訂主題之後,請將其套用至您的表單或互動式通訊。

注意

請勿修改主題資料庫資料夾中可用的主題。 此資料夾包含系統主題。 安裝較新版本的AEM Forms或Hot Fix時,會覆寫您對這些主題所做的任何變更。

對其他最適化表單使用案例的影響

  • 發佈/取消發佈表單: 發佈表單時,也會發佈套用至的主題(如果尚未發佈)
  • 匯入/匯出表單: 匯入或匯出表單時,也會自動匯入或匯出與其關聯的主題。
  • 表單的參照: 表單參照中的「參照」區段包含主題的額外專案。
  • 表單的上次修改時間: 當關聯的主題變更時更新。
  • A/B測試: 您可以在A/B測試中,將不同的主題套用至兩個版本的表單。 兩個主題的資訊分別儲存在兩個導引容器上。

CSS產生順序

當您選取檢視CSS時,主題編輯器會收集所有樣式資訊,並建置CSS。 系統會依下列順序收集資訊:

  1. 在主題的基本使用者端資料庫中定義的樣式。
  2. 使用者定義的樣式,使用側邊欄中的屬性指定。
  3. 使用CSS覆寫選項提供的CSS樣式。

例如,文字方塊的背景顏色在基本使用者端資料庫中為藍色。 您可以使用側邊欄中的屬性將其變更為粉紅色。 產生CSS時,文字方塊的背景顏色顯示為粉紅色。 使用屬性變更背景顏色後,另一位作者使用CSS覆寫選項,將背景顏色文字方塊變更為白色。 產生CSS時,背景顏色會在產生的CSS中顯示為白色。

偵錯樣式

當您在主題編輯器中指定元件的樣式時,會產生CSS。 當您設定類屬元件的樣式時,其中包含的多個元件也會設定樣式。 例如,當您設定欄位樣式時,其中的文字方塊和標籤也會設定樣式。 當您在欄位中設定文字方塊的樣式時,它會有自己的CSS。 如果您要為欄位和元件產生的CSS除錯,主題編輯器會提供選項供您檢視CSS。

您可以使用以下選項檢視產生的CSS:

  • 檢視CSS 側欄中的選項:選取主題中的元件時,您可以在側欄中看到「檢視CSS」選項。 它會顯示產生的CSS,包括CSS ::before::after 虛擬元素。
  • 檢視主題CSS 選項在畫布工具列中:在畫布工具列中,按一下 theme-options > 檢視主題CSS. 您可以看到從您在主題編輯器中定義的屬性產生的整個主題CSS。

疑難排解、建議和最佳作法

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

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

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

  • 使用基礎clientlib、主題編輯器和內嵌樣式

    • 基礎clientlib

      基礎使用者端資料庫包含樣式資訊。 若要在主題的使用者端資料庫中使用樣式資訊。

      1. 瀏覽至 Experience Manager> Forms >主題.
      2. 在「佈景主題」頁面中,選取佈景主題並按一下 檢視屬性.
      3. 在開啟的「屬性」頁面中,按一下 進階.
      4. 在「進階」標籤的「使用者端程式庫位置」欄位中,瀏覽並選取您要使用的使用者端程式庫。
      5. 按一下「儲存」。

      您在使用者端資料庫中指定的樣式會匯入到使用它的主題中。 例如,您可在使用者端資料庫中指定文字方塊、數值方塊和切換的樣式。 在主題中匯入使用者端資料庫時,會匯入文字方塊、數值方塊和切換的樣式。 然後,您可以使用主題編輯器來設定其他元件的樣式。
      您也可以建立佈景主題、建立佈景主題復本,然後針對類似使用案例修改複製佈景主題中提供的樣式。
      另請參閱 使用主題取得特定外觀

    • 主題編輯器:

      主題編輯器可讓您建立主題來設定表單或互動式通訊的樣式。 您可以指定主題中元件的樣式,以便在您開發的多個表單或互動式通訊中,讓外觀和感覺保持一致。 建議在主題中指定樣式資訊,然後將主題套用至表單。

    • 內嵌樣式:

      使用表單時,您可以使用表單或互動式通訊多頻道編輯器中的「樣式」模式來設定元件的樣式。 使用樣式模式變更表單元件樣式會覆寫主題中指定的樣式。 如果要變更特定表單中某些元件的樣式,請參閱 元件的內嵌樣式.

  • 使用使用者端資料庫

    如果要建立使用者端資料庫以匯入樣式資訊,請參閱 使用使用者端資料庫. 建立使用者端程式庫後,您可以使用上述步驟將其匯入主題中。

  • 變更容器面板配置寬度

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

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

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

本頁內容