建立和使用主題

簡介

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

您可以：

• 建立主題
• 編輯和複製現有主題
• 下載現有主題並上傳至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檔案。

上傳主題

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

上傳佈景主題：

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

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

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

主題的中繼資料

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

關於主題編輯器

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

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

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

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

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

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

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

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

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

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

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

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

  • 進階： 可讓您將自訂CSS新增至物件，這會覆寫視覺控制項所定義的屬性（如果有重疊）。

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

  此外，側欄底部會顯示箭頭。 按一下箭頭時，您會取得兩個其他選項： 模擬成功 和 模擬錯誤。 這些選項以及上述選項均會詳細討論 以下.

答： 側欄 B. 畫布

樣式元件

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

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

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

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

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

樣式化面板版面

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

現成可用的面板包括：

• 左側的索引標籤

• 索引標籤在頂端

• 折疊式面板

• 回應式

• 精靈

• 行動佈局

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

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

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

不同熒幕大小的不同樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

1. 在「主題編輯器」面板中，按一下 主題選項 > 設定.

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

取消復原/還原

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

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

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

使用主題編輯器

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

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

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

使用畫布

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

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

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

• 主題選項 ：提供三個選項

  • 設定：提供選項以選取預覽表單或互動式通訊、基礎clientlib和Adobe Fonts設定。
  • 檢視主題CSS：為選取的主題產生CSS。
  • 管理樣式：提供管理文字和影像樣式的選項
  • 說明：執行主題編輯器的影像導覽。

• 模擬器 ：模擬不同顯示大小的主題外觀。 在模擬器中將顯示大小視為中斷點。 您可以選取中斷點並為其指定樣式。 例如，桌上型電腦和平板電腦是兩個中斷點。 您可以為每個中斷點指定不同的樣式。

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

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

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

• ：可讓您切換至一般元件來設定樣式。 如果您選取數值方塊並點選此圖示，則會選取欄位元件。 如果您選取欄位元件並點選此圖示，則會選取面板。 如果您持續點選此圖示進行選取，您最終會選取樣式配置。

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

使用側欄

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

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

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

狀態

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

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

特性表

模擬錯誤/成功

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

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

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

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

設定元件樣式

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

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

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. 在作者執行個體中，按一下 Adobe Experience Manager >工具 >部署>Cloud Services。

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

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

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

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

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

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

2. 在主題編輯器中，導覽至 主題選項 > 設定.

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

   現在，您可以看到字型已新增到主題的font-family屬性中。

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

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

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

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

   

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

在主題編輯器中選取字型

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

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

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

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

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

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

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

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

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

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

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

2. 在編輯模式中，選取元件，然後按一下 > 最適化表單容器，然後按一下 .

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

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

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

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

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

2. 在編輯模式中，選取元件，然後按一下 >檔案容器，然後按一下 .

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

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

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

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

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

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

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

CSS產生順序

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

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

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

偵錯樣式

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

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

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

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

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

  編輯主題時，您可以瀏覽並新增其他主題中的資產（例如影像）。 例如，您正在編輯頁面的背景。 例如，當您選取 頁面 > 背景 > 新增 > 影像，您會看到對話方塊，可讓您瀏覽並新增其他主題中的影像。

• 如果從其他主題新增資產，而另一個主題被移動或刪除，則您可能會遇到目前主題的問題。 建議您避免瀏覽和新增其他主題中的資產。

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

  • 基礎clientlib：

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

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

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

  • 主題編輯器:

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

  • 內嵌樣式：

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

• 使用使用者端資料庫

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

• 變更容器面板配置寬度

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

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

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

Business.Adobe.com 資源

Content Insights Automated Onboarding Content Intelligence Managed Cloud Content As A Service Web Content Management