建立自訂最適化表單主題

必備條件

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

最適化表單主題

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

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

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

單快照圖： 森林主題範例

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

   例如，建立下列節點：

   /apps/myAfThemes/forestTheme

2. 將多值字串屬性categories添加到節點並適當設定其值。

   例如，將屬性設為：af.theme.forest。

   

3. 將兩個資料夾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

在最適化表單中使用主題

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

1. 若要包含在中建立的主題以建立最適化表單主題區段，請建立類型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。

2. 建立自訂範本(例如：/apps/myAfCustomizations/myAfTemplates/forestTemplate)，其jcr:content指向上一步中建立的自訂頁面(例如：myAfCustomizations/myAfPages/forestPage)。

   

3. 使用上一步中建立的範本建立最適化表單。 最適化表單的外觀與風格由本文「建立最適化表單主題」一節中建立的主題所定義。