建立自訂最適化表單主題

注意

AEM Forms提供主題編輯器功能，可建立及修改最適化表單主題。只有當您從沒有主題編輯器的版本升級，且您對使用較少/CSS檔案（預先主題編輯器方法）建立的主題已有現有投資時，才可執行本文章所列的步驟。

必備條件

了解LESS(Leaner CSS)框架
如何在Adobe Experience Manager中建立用戶端程式庫
使用您建立的主題建立最適化表單範本

最適化表單主題

最適化表單主題是AEM用戶端資料庫，您可用來定義最適化表單的樣式（外觀和風格）。

您可以建立適用性範本並將主題套用至範本。然後，可使用此自訂範本建立最適化表單。

適用性表單和用戶端程式庫

建立最適化表單主題的方式

注意

以下過程使用AEM對象的示例名稱（如節點、屬性和資料夾）進行描述。

如果使用名稱執行這些步驟，則生成的模板應與以下快照相似：

單快照圖： 森林主題範例

在/apps節點下建立cq:ClientLibraryFolder類型的節點。

例如，建立下列節點：

/apps/myAfThemes/forestTheme
將多值字串屬性categories添加到節點並適當設定其值。

例如，將屬性設為：af.theme.forest。
將兩個資料夾less和css以及一個檔案css.txt添加到步驟1中建立的節點中：
- less 資料夾：包含 less 用來定義變數和 less 管 less mixins 理.css樣式的變數檔案。
  
  此資料夾由less變數檔案、less mixin檔案、less檔案組成，這些檔案使用mixin和變數定義樣式。然後，所有這些較少的檔案都以styles.less導入。
- css資料夾：包含.css檔案，您可在其中定義要在主題中使用的靜態樣式。
變數檔案較少:這些是檔案，您可在其中定義或覆寫用於定義CSS樣式的變數。

適用性表單提供下列.less檔案中定義的OOTB變數：
- /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
- /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
適用性表單也提供下列項目中定義的第三方變數：

/apps/clientlibs/fd/af/third-party/less/variables.less

您可以使用適用性表單提供的較少變數、可以覆寫這些變數，或可以建立新的較少變數。

注意

導入較少前置處理器的檔案時，在導入語句中指定檔案的相對路徑。

覆寫變數的範例：
```
@button-background-color: rgb(19, 102, 44);
@button-border-color: rgb(19, 102, 44);
@button-border-size: 0px;
@button-padding: 10px 15px;
@button-font-color: #ffffff;
```
若要覆寫less變數：
1. 匯入預設適用性表單變數：
  
  /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
2. 然後匯入包含覆寫變數的較少檔案。
新變數定義範例：
```
@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);
```
混合檔案較少： 您可以定義接受變數作為引數的函式。這些函式的輸出即為產生的樣式。在不同樣式內使用這些混合，以避免重複的CSS樣式。

適用性表單提供以下定義的OOTB mixin:
- /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less
適用性表單也提供下列項目中定義的第三方混合：
- /apps/clientlibs/fd/af/third-party/less/mixins.less
範例mixin定義：
```
.rounded-corners (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.border(@color, @type, @size) {
   border: @color @size @type;
}
```
Styles.less File: 使用此檔案來包含用戶端程式庫中需要使用的所有較少檔案（變數、mixin、樣式）。

在以下示例styles.less檔案中，可以按任意順序放置匯入語句。

匯入下列.less檔案的陳述式為必填：
- globalvariables.less
- layoutvariables.less
- components.less
- layouts.less
```
@import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
@import "forestTheme-variables";
@import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";

/* custom styles */

.guidetoolbar {
  input[type="button"], button, .button {
    .rounded-corners (@button-radius);
    &:hover {
      background-color: @button-hover-bg-color;
    }
    &:focus {
      background-color: @button-focus-bg-color;
    }
  }
}

form {
    background-image: url(../images/forest.png);
 background-repeat: no-repeat;
 background-size: 100%;
}
```
css.txt包含要為程式庫下載的.css檔案路徑。

例如：
```
#base=/apps/clientlibs/fd/af/third-party/css
bootstrap.css

#base=less
styles.less

#base=/apps/clientlibs/fd/xfaforms/xfalib/css
datepicker.css
listboxwidget.css
scribble.css
dialog.css
```
注意

styles.less檔案不是必需的。這表示若您尚未定義任何自訂樣式、變數或mixin，則不需要建立此檔案。

但是，如果不建立style.less檔案，則需要在css.txt檔案中取消注釋以下行：

#base=less

並註解下列行：

styles.less

在最適化表單中使用主題

建立最適化表單主題後，請執行下列步驟以在最適化表單中使用此主題：

若要包含在中建立的主題以建立最適化表單主題區段，請建立類型cq:Component的自訂頁面。

例如， /apps/myAfCustomizations/myAfPages/forestPage
1. 新增sling:resourceSuperType屬性，並將其值設為fd/af/components/page/base。
2. 若要使用頁面中的主題，需要將覆蓋檔案library.jsp添加到節點。
  
  然後，您會匯入在中建立的主題，以建立本文的最適化表單主題區段。
  
  下列范常式式碼片段匯入af.theme.forest主題。
```
<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<cq:includeClientLib categories="af.theme.forest"/>
```
3. 可選:在自訂頁面中，視需要覆寫header.jsp、footer.jsp和body.jsp。
建立自訂範本(例如：/apps/myAfCustomizations/myAfTemplates/forestTemplate)，其jcr:content指向上一步中建立的自訂頁面(例如：myAfCustomizations/myAfPages/forestPage)。
使用上一步中建立的範本建立最適化表單。最適化表單的外觀與風格由本文「建立最適化表單主題」一節中建立的主題所定義。