擴充和設定登錄頁面的設計匯入工具

本節說明如何設定，並視需要為登錄頁面擴充設計匯入工具。登錄頁面中涵蓋匯入後使用登錄頁面。

讓設計匯入工具擷取自訂元件

以下是讓設計匯入工具辨識自訂元件的邏輯步驟

建立TagHandler
- 標籤處理常式是POJO，可處理特定類型的HTML標籤。您的TagHandler可以處理的「kind」HTML標籤是透過TagHandlerFactory的OSGi屬性「tagpattern.name」定義。此OSGi屬性實質上是規則運算式，應符合您要處理的輸入html標籤。所有巢狀標籤都會擲回至您的標籤處理常式以進行處理。例如，如果註冊包含巢狀<p>標籤的div,<p>標籤也會擲回至您的TagHandler，而由您決定要如何處理它。
- 標籤處理程式介麵類似於SAX內容處理程式介面。它會收到每個html標籤的SAX事件。作為標籤處理常式提供者，您需要實作某些生命週期方法，這些方法會由設計匯入工具架構自動呼叫。
建立其對應的TagHandlerFactory。
- 標籤處理常式工廠是OSGi元件（單例），負責產生標籤處理常式的例項。
- 您的標籤處理常式工廠必須公開名為「tagpattern.name」的OSGi屬性，其值與輸入html標籤相符。
- 如果有多個標籤處理常式與輸入html標籤相符，則會挑選排名較高的處理常式。排名本身會以OSGi屬性service.ranking公開。
- TagHandlerFactory是OSGi元件。要提供給TagHandler的任何引用必須通過此工廠。
如果您想要覆寫預設值，請確定您的TagHandlerFactory有更好的排名。

注意

AEM 6.5🔗已棄用用於匯入登錄頁面的設計匯入工具。

準備要導入的HTML

建立匯入工具頁面後，您可以匯入完整的HTML登陸頁面。若要匯入HTML登錄頁面，您必須先將其內容壓縮至設計套件中。設計套件包含您的HTML登陸頁面以及參考的資產（影像、CSS、圖示、指令碼等）。

以下速查表提供如何準備HTML以匯入的範例：

登錄頁面速查表

取得檔案

Zip檔案配置和要求

注意

此時，ZIP檔案只能包含一個HTML頁面或一個頁面的一部分。

郵遞區號的範例配置如下：

/index.html ->登錄頁面HTML檔案
/css ->以新增至CSS clientlib
/img ->所有影像和資產
/js ->新增至JS clientlib

配置是以HTML5模板最佳實務配置為基礎。如需詳細資訊，請前往https://html5boilerplate.com/

注意

至少，設計包必須包含根級別的index.html檔案。如果要匯入的登陸頁面也有行動版本，則zip必須包含根層級的mobile.index.html以及index.html。

準備登錄頁面HTML

若要匯入HTML，您需要將畫布div新增至登錄頁面HTML。

畫布div是html div，其中id="cqcanvas"必須插入HTML <body>標籤內，且必須包住要轉換的內容。

新增畫布div後，登錄頁面HTML的範例片段如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>
<body>
 <div id="cqcanvas">
  <!-- HTML content intended for conversion -->
 </div>
</body>
</html>

準備HTML以包含可編輯的AEM元件

匯入登錄頁面時，您可以選擇依原樣匯入頁面，這表示匯入登錄頁面後，您無法編輯AEM中的任何匯入項目(您仍可在頁面上新增其他AEM元件)。

匯入登錄頁面之前，您可能想要轉換登錄頁面的某些部分，使其成為可編輯的AEM元件。這可讓您在匯入登錄頁面設計後，快速編輯登錄頁面的部分。

若要這麼做，請將data-cq-component新增至您匯入之HTML檔案中的適當元件。

以下章節說明如何編輯HTML檔案，以便將登錄頁面的某些部分轉換為不同可編輯的AEM元件。如需詳細說明，請參閱登錄頁面元件。

注意

將登錄頁面的部分轉換為AEM元件的HTML標籤，具有長格式和速記標籤聲明。每個元件都會說明兩者。

限制

匯入前，請注意下列限制：

在<body>標籤上套用的類或ID之類的屬性不會保留

如果內文標籤上套用了id或class等屬性（例如<body id="container">），則匯入後不會保留它。因此，導入的設計不應對<body>標籤上應用的屬性有任何依賴項。

拖放zip

Internet Explorer和Firefox 3.6版及舊版不支援拖放郵遞區號上傳。若要在使用這些瀏覽器時上傳設計，請按一下拖放檔案區域以開啟檔案上傳對話方塊，然後使用該對話方塊上傳您的設計。

支援「拖放」設計zip的瀏覽器為Chrome、Safari5.x、Firefox 4及更新版本。

不支援Modernizr

Modernizr.js 是以javascript為基礎的工具，可偵測瀏覽器的原生功能，並偵測它們是否適合html5元素。使用Modernizr來增強舊版不同瀏覽器支援的設計，可能會在登錄頁面解決方案中造成匯入問題。 Modernizr.js 設計匯入工具不支援指令碼。

導入設計包時不會保留頁面屬性

任何頁面屬性（例如自訂網域、強制HTTPS等）在匯入設計套件之前為頁面設定（使用空白登陸頁面範本），在匯入設計後會遺失。因此，建議的作法是在匯入設計套件後設定頁面屬性。

僅HTML標籤假設

在導入時，由於安全原因和為了避免導入和發佈無效標籤，對標籤進行清理。這會假設僅HTML標籤，且將篩選掉所有其他形式的元素，例如內嵌SVG或Web元件。

文字

HTML標籤，以在設計包內的HTML中插入文本元件(foundation/components/text):

<div data-cq-component="text"> <p>This is some editable text</p> </div>

在HTML中加入上述標籤，會執行下列動作：

在匯入設計套件後建立的登錄頁面中建立可編輯的AEM文字元件(sling:resourceType=foundation/components/text)。
將已建立文本元件的text屬性設定為div內括的HTML。

速記元件標籤聲明:

<p data-cq-component="text">Text component shorthand</p>

包含清單的文字

要添加包含清單的文本，請執行以下操作：

第1
第2

可在RTE編輯器中編輯的檔案：

<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>

帶顏色的文本

若要新增可在RTE編輯器中編輯的彩色（粉紅色）文字：

<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>

標題

HTML標籤，以在設計套件內的HTML中插入標題元件(wcm/landingpage/components/title):

<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>

在HTML中加入上述標籤，會執行下列動作：

在匯入設計套件後建立的登錄頁面中建立可編輯的AEM標題元件(sling:resourceType=wcm/landingpage/components/title)。
將已建立標題元件的jcr:title屬性設為包在div內的標題標籤內的文字。
將type屬性設定為標題標籤，在此例中為h1。

標題元件支援7種類型 — h1, h2, h3, h4, h5, h6和default。

速記元件標籤聲明:

<h1 data-cq-component="title">Title component shorthand</h1>

影像

HTML標籤，可在設計套件內的HTML中插入影像元件(foundation/components/image):

<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>

在HTML中加入上述標籤，會執行下列動作：

在匯入設計套件後建立的登錄頁面中建立可編輯的AEM影像元件(sling:resourceType=foundation/components/image)。
將已建立映像元件的fileReference屬性設定為在src屬性中指定的映像導入到的路徑。
將alt屬性設定為img標籤中alt屬性的值。
將title屬性設定為img標籤中標題屬性的值。
將width屬性設定為img標籤中width屬性的值。
將height屬性設定為img標籤中height屬性的值。

速記元件標籤聲明：

<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

影像元件Div內不支援絕對URL img src

如果嘗試進行元件轉換時，使用絕對URL src的<img>標籤，則會引發適當的UnsupportedTagContentException。例如，不支援下列項目：

<div data-cq-component="image">

<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>

</div>

但是，非影像元件div一部分的img標籤支援絕對URL影像。

動作呼叫元件

您可以將要匯入的登錄頁面部分標示為「可編輯的動作呼叫元件」 — 這類匯入的動作呼叫元件，可在匯入登錄頁面後加以編輯。 AEM包含下列CTA元件：

點進連結 — 可讓您新增文字連結，當點按連結時，會將訪客帶往目標URL。
圖形連結 — 可讓您新增在點按時將訪客帶往目標URL的影像。

點進連結

此CTA元件可用來在登錄頁面上新增文字連結。

支援的屬性

標籤，帶粗體、斜體和下划線選項
Target URL，支援第三方和AEM URL
頁面呈現選項（相同視窗、新視窗等）

HTML標籤，可在匯入的zip中包含點進元件。此處href對應至目標url、「檢視產品詳細資料」對應至標籤等。

<div id="cqcanvas">
.
.
                <div data-cq-component="clickThroughLink">
        <a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html">View Product Details  ></a>
  </div>
.
.
</div>

此元件可用於任何獨立應用程式，或可從zip匯入。

速記元件標籤聲明:

<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>

圖形連結

此CTA元件可用來新增任何圖形影像，其中包含登陸頁面上的連結。影像可以是簡單按鈕或任何以圖形影像作為背景的影像。點按影像時，會將使用者帶至元件屬性中指定的目標URL。這是「行動呼籲」群組的一部分。

支援的屬性

影像裁切、旋轉
暫留文字、說明、像素大小
Target URL，支援第三方和AEM URL
頁面呈現選項（相同視窗、新視窗等）

HTML標籤，以在匯入的zip中包含圖形連結元件。此處href將映射至目標url, img src將是呈現影像，「title」將被視為暫留文本等。

<div id="cqcanvas">
  <div data-cq-component="clickThroughGraphicalLink"><a href="https://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Click Here to Learn More" /></a></div>
</div>

速記元件標籤聲明:

<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>

注意

若要建立點進圖形連結，您需要將錨點標籤和影像標籤包住div內具有data-cq-component="clickthroughgraphicallink"屬性。

例如。<div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>

不支援使用CSS將影像與錨點標籤建立關聯的其他方法，例如下列標籤將無法運作：

<div data-cq-component="clickthroughgraphicallink">

<a class="hasBackground" href="https://myURLhere/"></a>

</div>

與關聯的css .hasbackground { background-image: pathtoimage }

銷售機會表單

銷售機會表單是用於收集訪客/銷售機會設定檔資訊的表單。這些資訊可以儲存，並稍後用於根據這些資訊進行有效的營銷。此資訊通常包括標題、姓名、電子郵件、出生日期、地址、興趣等。它是「CTA銷售機會表單」群組的一部分。

支援的功能

預先定義的銷售機會欄位 — 名字、姓氏、地址、dob、性別、關於、userId、emailId、submit按鈕可在sidekick中使用。只需在銷售機會表單中拖放所需元件即可。
在這些元件的協助下，作者可以設計獨立銷售機會表單，這些欄位對應至銷售機會表單欄位。在獨立或匯入的zip應用程式中，使用者可以使用cq:form或cta銷售機會表單欄位來新增額外欄位、命名，並根據需求進行設計。
使用CTA銷售機會表單的特定預先定義名稱（例如 — firstName for first-name for lead form）映射銷售機會表單欄位，以此類推。
未對應至銷售機會表單的欄位會對應至cq:form元件 — 文字、選項、核取方塊、下拉式清單、隱藏、密碼。
使用者可使用「標籤」標籤來提供標題，並可使用樣式屬性「class」來提供樣式（僅適用於CTA銷售機會表單元件）。
「感謝」頁面和訂閱清單可以作為表單的隱藏參數提供（顯示在index.htm中），也可以從「銷售機會表單的開始」的編輯欄新增/編輯

<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you" />

<input type="hidden" name="groupName" value="leadForm" />
每個元件的編輯組態可提供所需的限制，例如。

HTML標籤，以在匯入的zip中包含圖形連結元件。此處，「firstName」對應至銷售機會表單firstName等，但核取方塊除外 — 這兩個核取方塊對應至cq:form下拉式元件。

<div id="cqcanvas">
   <div id="form_wrapper">
    <h2>NEWSLETTER SIGN UP</h2>
       <div data-cq-component="leadFormGeneration">
       <form method="post" action="#" onsubmit="return popupBox()">
       <label for="firstName" class="checkText">
        FIRST NAME
       </label><br />
       <input name="firstName" class="text pink" type="text" /><br />
       <label for="lastName" class="checkText">
        LAST NAME
       </label><br />
       <input name="lastName" class="text pink" type="text" /><br />
       <label for="emailId" class="checkText">
        EMAIL ADDRESS
       </label><br />
       <input name="emailId" class="text pink" type="text" /><br />

       <div class="checkboxes">
       <input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
       <input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
       </div>
       <input type="submit" name="submit" class="submit pink" value="Sign Up >" />
       </form>
     </div>
   </div>

Parsys

AEM parsys元件是可包含其他AEM元件的容器元件。可以在匯入的HTML中新增parsys元件。這可讓使用者在匯入登錄頁面後，仍將可編輯的AEM元件新增/刪除至登錄頁面。

段落系統可讓使用者使用sidekick新增元件。

在設計套件內的HTML中插入parsys元件(foundation/components/parsys)的HTML標籤：

<div data-cq-component="parsys">
   <div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
        <div data-cq-component="title"><h3>ON SALE</h3></div>
</div>

在HTML中加入上述標籤會執行下列動作：

在匯入設計套件後建立的登陸頁面中插入AEM parsys元件(foundation/components/parsys)。
使用預設元件初始化sidekick。可將新元件從sidekick拖曳元件至parsys元件，以將其新增至登錄頁面。
兩個標題元件也是parsys的一部分。

目標

目標元件會顯示頁面上的體驗內容。您可以在促銷活動中建立許多體驗，而目標元件可動態地顯示來自不同體驗的內容給造訪頁面的不同使用者。

要插入目標元件，以及在促銷活動中建立不同體驗的html標籤：

<div data-cq-component="target">
 <section data-cq-component="experience" data-cq-experience="default">
  <p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="over-30">
  <p data-cq-component="text">Content for Over 30</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="under-30">
  <p data-cq-component="text">Content for Under 30</p>
 </section>
</div>

其他導入選項

除了指定匯入的元件是否為可編輯的AEM元件外，您也可以在匯入設計套件之前設定下列項目：

擷取匯入HTML中定義的中繼資料，以設定頁面屬性。
在HTML中指定字元集編碼。
覆蓋匯入工具頁面範本。

透過擷取匯入的HTML中定義的中繼資料來設定頁面屬性

設計匯入工具應擷取並保留在匯入HTML標題中宣告的下列中繼資料，並將其保留為「jcr:description」屬性：

<meta name="description" content="">

HTML標籤中設定的Lang屬性應由設計匯入工具擷取並保留為屬性"jcr:language"

<html lang="en">

在html中指定字元集編碼

設計匯入工具會讀取匯入的HTML中指定的編碼。可指定如下編碼：

<meta charset="UTF-8">

或

<meta http-equiv="content-type" content="text/html;charset=utf-8">

如果未在匯入的HTML中指定任何編碼，則設計匯入工具設定的預設編碼為UTF-8。

覆蓋模板

您可以在下列位置建立新的登錄頁面，以覆蓋空白登錄頁面範本：/apps/<appName>/designimporter/templates/<templateName>

在AEM中建立新範本的步驟將在此處說明。

從登陸頁面轉介元件

假設您有要在HTML中使用data-cq-component屬性參照的元件，讓設計匯入工具在此處轉譯元件包含。例如，要引用表元件(resourceType = /libs/foundation/components/table)。需要在HTML中新增下列項目：

<div data-cq-component="/libs/foundation/components/table">foundation table</div>

data-cq-component中的路徑應為元件的resourceType。

最佳作法

若要搭配在匯入時標示為要進行元件轉換的元素使用，不建議使用類似下列的CSS選取器。

E > F	E元素的F元素子項	子組合器
E + F	F元素前面緊接著E元素	相鄰同級組合器
E ~ F	前面有E元素的F元素	一般同級組合器
E:root	E元素，文檔的根	結構偽類
E:nth-child(n)	an E元素，其父項的n子項	結構偽類
E:nth-last-child(n)	一個E元素，即其父項的第n個子項，從最後一個計數	結構偽類
E:nth-of-type(n)	an E元素，其類型的第n個同級	結構偽類
E:nth-last-of-type(n)	an E元素，其類型的第n個同級，從最後一個計數	結構偽類

這是因為在匯入後，其他html元素（例如<div>標籤）會新增至產生的Html。

也不建議使用依賴上述結構的指令碼，以搭配標示為要轉換為AEM元件的元素使用。
不建議在標籤標籤上使用樣式進行元件轉換，例如<div data-cq-component="*">。
設計配置應遵循HTML5模板的最佳實務。深入了解：https://html5boilerplate.com/。

配置OSGI模組

公開可透過OSGI控制台設定之屬性的元件如下：

登陸頁面設計匯入工具
登陸頁面產生器
行動登陸頁面產生器
登錄頁條目預處理器

下表簡要說明了這些屬性：

元件	屬性名稱	屬性說明
登陸頁面設計匯入工具	擷取篩選器	用於從擷取中篩選檔案的規則運算式清單。與任何指定模式相符的郵遞區號項目會從解壓縮中排除
登陸頁面產生器	檔案模式	著陸頁面產生器可設定為處理符合由檔案模式定義之規則運算式的HTML檔案。
行動登陸頁面產生器	檔案模式	著陸頁面產生器可設定為處理符合由檔案模式定義之規則運算式的HTML檔案。
	裝置群組	要支援的設備組清單。
登錄頁條目預處理器	搜尋模式	要在存檔條目內容中搜索的模式。此規則運算式逐行與登入內容相符。匹配後，匹配的文本將替換為指定的替換模式。請參閱以下關於登錄頁面條目預處理程式的當前限制的備注。
	取代圖樣	取代找到之相符項目的模式。您可以使用規則運算式群組參考，例如$1、$2。此外，此模式支援在匯入期間以實際值解析的關鍵字，如{designPath}。

注意

登錄頁條目預處理器的當前限制：
如果您需要對搜尋模式進行任何變更，當您開啟felix屬性編輯器時，需要手動新增反斜線字元以逸出規則運算式中繼字元。如果您不手動新增反斜線字元，則規則運算式會視為無效，且不會取代舊的字元。

例如，如果預設設定為
/\* *CQ_DESIGN_PATH *\*/ *(['"])

你需要替換 >CQ_DESIGN_PATH 在搜尋模式中，則您的搜尋模式應如下所示：VIPURL
/\* *VIPURL *\*/ *(['"])

疑難排解

匯入設計套件時，您可能會遇到數個錯誤，如本節所述。

使用著陸頁面相關元件初始化sidekick

如果設計套件包含parsys元件標籤，則匯入後，sidekick會開始顯示登錄頁面的相關元件。您可以將新元件拖放至著陸頁面內的parsys元件。您也可以前往設計模式，並將新元件新增至sidekick。

導入期間顯示的錯誤消息

如果發生任何錯誤（例如，匯入的套件不是有效的zip），設計匯入將不會匯入套件，而會在拖放方塊的正上方在頁面上方顯示錯誤訊息。此處說明錯誤情況的範例。更正錯誤後，您可以將更新的zip重新匯入至相同的空白登陸頁面。擲回錯誤的不同情況如下：

導入的設計包不是有效的zip存檔。
導入的設計包在頂層不包含index.html。

匯入後顯示警告

若有任何警告（例如HTML指的是套件中不存在的影像），設計匯入工具會匯入zip，但同時在「結果窗格」上顯示問題/警告清單，按一下問題連結，會顯示警告清單，指出設計套件中的任何問題。設計匯入工具擷取並顯示警告的不同情況如下：

HTML是指套件中不存在的影像。
HTML指的是套件中不存在的指令碼。
HTML是指套件中不存在的樣式。

ZIP檔案儲存在AEM中的位置？

匯入登錄頁面後，檔案（影像、css、js等）設計套件內儲存於AEM中的下列位置：

/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>

假設在促銷活動We.Retail下建立登錄頁面，且登錄頁面的名稱為myBlankLandingPage，則儲存Zip檔案的位置如下：

/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

未保留格式

建立CSS時，請注意下列限制：

如果文字和（可編輯）影像類似下列：

<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>

在box類別上套用CSS，如下所示：

.box

{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }

然後在設計匯入工具中使用box img，產生的登錄頁面似乎並未保留格式。若要解決此問題，請注意AEM在CSS中新增div標籤，並據此重寫程式碼。否則，某些CSS規則將會無效。

.box img

{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }

注意

此外，設計人員應注意，匯入工具只會識別id=cqcanvas標籤內的程式碼，否則不會保留設計。

adobe.com 上的資源

Style System Content Intelligence Personalized Communications Responsive Forms Digital Signage Content Management System

擴充和設定登錄頁面的設計匯入工具

準備要導入的HTML

Zip檔案配置和要求

準備登錄頁面HTML

準備HTML以包含可編輯的AEM元件

限制

在<body>標籤上套用的類或ID之類的屬性不會保留

拖放zip

不支援Modernizr

導入設計包時不會保留頁面屬性

僅HTML標籤假設

文字

標題

影像

影像元件Div內不支援絕對URL img src

動作呼叫元件

點進連結

圖形連結

銷售機會表單

Parsys

目標

其他導入選項

透過擷取匯入的HTML中定義的中繼資料來設定頁面屬性

在html中指定字元集編碼

覆蓋模板

從登陸頁面轉介元件

最佳作法

配置OSGI模組

疑難排解

使用著陸頁面相關元件初始化sidekick

導入期間顯示的錯誤消息

匯入後顯示警告

ZIP檔案儲存在AEM中的位置？

未保留格式

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe