建立和使用主題 creating-and-using-themes

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

簡介 introduction

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

您可以：

建立、下載或上傳主題 creating-downloading-or-uploading-a-theme

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

建立主題 creating-a-theme

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

下載主題 downloading-a-theme

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

上傳主題 uploading-a-theme

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

上傳佈景主題：

主題的中繼資料 metadata-of-a-theme

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

關於主題編輯器 about-the-theme-editor

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

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

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

答： 側欄 B. 畫布

設定元件樣式 styling-components

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

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

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

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

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

樣式面板配置 styling-panel-layouts-br

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

現成可用的面板包括：

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

不同熒幕大小的不同樣式 different-styles-for-different-screen-sizes-br

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

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

選取物件時，側邊欄中的樣式屬性前後關聯變更 styling-properties-context-changes-in-sidebar-on-selecting-objects

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

主題編輯器中最近使用的樣式 recently-used-styles-in-theme-editor

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

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

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

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

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

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

即時預覽、儲存和捨棄變更 live-preview-save-and-discard-changes

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

使用其他最適化表單或互動式通訊的主題 theme-with-another-adaptive-form-or-interactive-communication

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

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

重做/還原 redo-undo

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

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

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

使用主題編輯器 using-the-theme-editor

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

如上所述，主題編輯器有兩個面板：側欄和畫布。

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

使用畫布 using-canvas

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

在「畫布」工具列中，您會看到：

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

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

使用側欄 using-rail

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

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

狀態 state

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

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

特性表 property-sheet

模擬錯誤/成功 simulate-error-success

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

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

設定元件樣式 styling-a-component

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

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

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

指定狀態的樣式欄位 styling-fields-given-state

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

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

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

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

較小顯示器的樣式配置 styling-layouts-for-smaller-displays

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

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

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

在主題中使用網頁字型 using-web-fonts-in-a-theme

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

執行以下步驟，在AEM中設定Adobe Fonts：

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

在主題編輯器中列出及選取字型 listing-and-selecting-fonts-in-theme-editor

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

在主題編輯器中選取字型 selecting-fonts-in-theme-editor

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

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

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

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

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

套用至主題編輯器的遮色片樣式 mask-styles-applied-in-theme-editor

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

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

將主題套用至表單或互動式通訊 applying-a-theme-to-a-form-or-interactive-communication-br

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

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

在執行階段變更表單主題 change-theme-of-a-form-at-runtime

佈景主題會設定表單中不同元件的樣式。 您可以使用 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 選項可讓您提供佈景主題的路徑。 它會變更表單的主題，並以更新的樣式重新整理表單。

使用主題取得特定外觀 specific-af-appearance

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

若要複製主題，請執行下列步驟：

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

對其他最適化表單使用案例的影響 impact-on-other-adaptive-form-use-cases

CSS產生順序 css-generation-sequence

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

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

偵錯樣式 debugging-styles

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

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

疑難排解、建議和最佳作法 troubleshooting-recommendations-and-best-practices