建立自訂最適化表單主題

注意

AEM Forms提供主題編輯器功能,以建立和修改最適化表單主題。 只有當您從沒有主題編輯器的版本升級,而且您已對使用Less/CSS檔案(預先主題編輯器方法)建立的主題有現有投資時,才可執行本文中列出的步驟。

必備條件

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

最適化表單主題

最適化表單主題​是AEM用戶端程式庫,可用來定義最適化表單的樣式(外觀和感覺)。

您可以建立​自適應模板​並將主題應用於模板。 然後,您可以使用此自訂範本來建立​最適化表單

最適化表單和用戶端程式庫

建立最適化表單主題

注意

使用AEM物件的範例名稱(例如節點、屬性和資料夾)來說明下列程式。

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

森林主題自適應形
式快照圖:森 林主題樣本

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

    例如,建立以下節點:

    /apps/myAfThemes/forestTheme

  2. 將多值字串屬性categories新增至節點並適當設定其值。

    例如,將屬性設為:af.theme.forest

    CRX儲存庫快照

  3. lesscss兩個資料夾以及一個檔案css.txt添加到步驟1中建立的節點:

    • less 資料夾:包含您 less 用來定義變數和 less 用於 less mixins 管理。css樣式的變數檔案。

      此資料夾包含less變數檔案、less mixin檔案、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

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

    注意

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

    覆寫變數範例:

    @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樣式。

    最適化表單提供定義於:

    • /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

    最適化表單也提供下列定義的協力廠商混合:

    • /apps/clientlibs/fd/af/third-party/less/mixins.less

    混合定義示例:

    .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:使 用此檔案可包含用戶端程式庫中需要使用的所有較少檔案(變數、混合、樣式)。

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

    要導入以下。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檔案不是必需的。 這表示,如果您尚未定義任何自訂樣式、變數或混音,就不需要建立此檔案。

    不過,如果您未在css.txt檔案中建立style.less檔案,則需要取消下列行的註解:

    #base=less

    並加上下列備注:

    styles.less

在最適化形式中使用主題

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

  1. 要包含在中建立的主題以建立最適化表單主題部分,請建立類型為cq:Component的自定義頁面。

    例如, /apps/myAfCustomizations/myAfPages/forestPage

    1. 新增sling:resourceSuperType屬性,並將其值設定為fd/af/components/page/base

      CRX儲存庫快照

    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/forestTemplatemyAfCustomizations/myAfPages/forestPage)

    CRX儲存庫快照

  3. 使用在上一步中建立的模板建立最適化表單。 最適化表單的外觀和感覺由本文「建立最適化表單主題」一節中建立的主題所定義。

本頁內容