本節說明如何設定,以及視需要擴充登入頁面的設計匯入工具。 有關匯入後使用登陸頁面的資訊,請參閱 登陸頁面。
讓設計匯入工具提取您的自訂元件
以下是讓Design Importer識別您的自訂元件的邏輯步驟
建立TagHandler
建立其對應的TagHandlerFactory。
如果您想要覆寫預設值,請確定TagHandlerFactory的排名較好。
Design Importer,用於匯入登入頁面, 已由AEM 6.5取代.
建立匯入工具頁面後,您可以匯入完整的HTML登陸頁面。 若要匯入HTML登入頁面,您必須先將其內容壓縮至設計封裝。 設計套件包含您的HTML登陸頁面以及參照的資產(影像、css、圖示、指令碼等)。
下列速查表提供如何準備匯入HTML的範例:
登陸頁面速查表
此時,ZIP檔案只能包含一個HTML頁面或頁面的一部分。
郵遞區號的範例配置如下:
此配置是根據HTML5樣板最佳實務配置。 如需詳細資訊,請參閱 https://html5boilerplate.com/
至少,設計封裝 必須 包含 index.html 根層級的檔案。 如果要匯入的登入頁面也有行動版本,則zip檔案必須包含 mobile.index.html 以及 index.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>
匯入登入頁面時,您可以選擇按原樣匯入頁面,這表示在匯入登入頁面後,您無法在AEM中編輯任何匯入的專案(您仍然可以在頁面上新增其他AEM元件)。
在匯入登入頁面之前,您可能需要轉換登入頁面的某些部分,使其成為可編輯的AEM元件。 這可讓您快速編輯登入頁面的部分,即使登入頁面設計已匯入亦然。
若要這麼做,請新增 data-cq-component
至您匯入之HTML檔案中的適當元件。
下節將說明如何編輯HTML檔案,以便將登入頁面的某些部分轉換為其他可編輯的AEM元件。 如需元件的詳細說明,請參閱 登陸頁面元件.
將部分登入頁面轉換為AEM元件的HTML標示同時具有長格式和速記標籤宣告。 針對每個元件說明兩者。
匯入之前,請注意下列限制:
例如,如果有任何屬性(如id或類別)套用至body標籤 <body id="container">
則在匯入後不會保留。 因此,匯入的設計不應與套用至 <body>
標籤之間。
Internet Explorer和Firefox 3.6版及舊版不支援拖放zip上傳。 若要在使用這些瀏覽器時上傳設計,請按一下拖放檔案區域,開啟檔案上傳對話方塊,然後使用該對話方塊上傳您的設計。
支援「拖放」設計Zip的瀏覽器為Chrome、Safari5.x、Firefox 4及更高版本。
Modernizr.js
是以JavaScript為基礎的工具,可偵測瀏覽器的原生功能,並偵測這些功能是否適用於html5元素。 使用Modernizer來增強支援舊版不同瀏覽器的設計,可能會導致登陸頁面解決方案中出現匯入問題。 Modernizr.js
Design Importer不支援指令碼。
為頁面(使用空白登陸頁面範本)設定的任何頁面屬性(例如,自訂網域、強制執行HTTPS等)在匯入設計封裝之前都會在匯入設計封裝後遺失。 因此,建議您在匯入設計封裝後設定頁面屬性。
匯入時,標籤會因為安全性原因而遭到清除,以避免匯入和發佈無效的標籤。 這假設僅限HTML的標籤以及所有其他形式的元素(例如內嵌SVG或Web元件)將被篩選掉。
HTML標示以插入文字元件( foundation/components/text
)在設計封裝內的HTML中:
<div data-cq-component="text"> <p>This is some editable text</p> </div>
在HTML中包含上述標籤,會執行下列動作:
sling:resourceType=foundation/components/text
)時,不會顯示於匯入設計套件後建立的登入頁面中。text
所建立文字元件的屬性對應到內含的HTML div
.速記元件標籤宣告:
<p data-cq-component="text">Text component shorthand</p>
含清單的文字
新增包含清單的文字:
可以在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標示以插入標題元件( wcm/landingpage/components/title
)在設計封裝內的HTML中:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>
在HTML中包含上述標籤,會執行下列動作:
sling:resourceType=wcm/landingpage/components/title
)時,不會顯示於匯入設計套件後建立的登入頁面中。jcr:title
將建立的標題元件屬性對應到包在div中的標題標籤內的文字。type
屬性新增至標題標籤,在此案例中為 h1
.標題元件支援七種型別 — 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中包含上述標籤,會執行下列動作:
sling:resourceType=foundation/components/image
)時,不會顯示於匯入設計套件後建立的登入頁面中。fileReference
建立之影像元件的屬性,指向src屬性中指定的影像匯入的路徑。alt
屬性對應至img標籤中alt屬性的值。title
屬性對應至img標籤中title屬性的值。width
屬性對應至img標籤中width屬性的值。height
屬性前往img標籤中height屬性的值。速記元件標籤宣告:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
如果 <img>
已嘗試使用絕對url src的標籤進行元件轉換(適當的) 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元件:
此CTA元件可用來在登入頁面上新增文字連結。
支援的屬性
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。 它是「行動號召」群組的一部分。
支援的屬性
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、提交按鈕在sidekick中可用。 只需在潛在客戶表單中拖放所需的元件即可。
在這些元件的協助下,作者可以設計獨立的銷售機會表單,這些欄位與銷售機會表單欄位相對應。 在獨立或匯入的zip應用程式中,使用者可以使用cq:form或cta潛在客戶表單欄位、名稱來新增額外的欄位,並根據需求進行設計。
使用CTA潛在客戶表單的特定預先定義名稱來對應潛在客戶表單欄位,例如 — 潛在客戶表單中名字的firstName等等。
未對應到潛在表單對應到cq:form元件的欄位 — 文字、單選、核取方塊、下拉式清單、隱藏、密碼。
使用者可以使用「label」標籤提供標題,也可以使用樣式屬性「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>
AEM parsys元件是可包含其他AEM元件的容器元件。 可以在匯入的HTML中新增parsys元件。 這可讓使用者在登入頁面新增/刪除可編輯的AEM元件,即使頁面已匯入亦然。
段落系統讓使用者能夠使用Sidekick新增元件。
插入parsys元件的HTML標示( 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中包含上述標籤會執行下列動作:
目標元件會顯示頁面上的體驗內容。 您可以在行銷活動中建立許多體驗,且目標元件可動態地向造訪頁面的不同使用者顯示不同體驗的內容。
用於插入Target元件以及在行銷活動中建立不同體驗的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標題中宣告的以下中繼資料,作為屬性「jcr:description」:
在HTML標籤中設定的Lang屬性應由設計匯入工具擷取並保留為屬性"jcr:language"
設計匯入工具會讀取匯入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中建立新範本的步驟 此處.
假設您有一個元件,且您要使用data-cq-component屬性在HTML中參照該元件,如此設計匯入工具就會在此呈現一個元件包含。 例如,您想要參照表元件( 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 | 緊接在E元素前面的F元素 | 相鄰同層級組合器 |
E ~ F | F元素前面加上E元素 | 一般同層級組合器 |
E:root | E元素,檔案的根 | 結構化的虛擬類別 |
E:nth-child(n) | E元素,其父項的第n個子項 | 結構化的虛擬類別 |
E:nth-last-child(n) | E元素,其父項的第n個子項,從最後一個專案開始計數 | 結構化的虛擬類別 |
E:nth-of-type(n) | E元素,其型別的第n個同層級 | 結構化的虛擬類別 |
E:nth-last-of-type(n) | E元素,其型別的第n個同層級,從最後一個專案開始計數 | 結構化的虛擬類別 |
這是因為其他html元素,例如 <div> 標籤會新增至匯入後產生的Html。
以下元件會公開可透過OSGI主控台設定的屬性:
下表簡要說明屬性:
元件 | 屬性名稱 | 屬性說明 |
登陸頁面設計匯入工具 | 擷取篩選器 | 用於篩選擷取中檔案的規則運算式清單。 符合任何指定模式的壓縮專案會從擷取中排除 |
登陸頁面產生器 | 檔案模式 | 登入頁面產生器可設定為處理符合檔案模式所定義之規則運算式的HTML檔案。 |
行動登陸頁面產生器 | 檔案模式 | 登入頁面產生器可設定為處理符合檔案模式所定義之規則運算式的HTML檔案。 |
裝置群組 | 要支援的裝置群組清單。 | |
登陸頁面登入前置處理器 | 搜尋模式 | 要在封存專案內容中搜尋的模式。 此規則運算式與專案內容逐行比對。 相符時,相符的文字會以指定的取代模式取代。 請參閱下方關於登陸頁面登入前置處理器目前限制的附註。 |
取代圖樣 | 取代找到的相符項的模式。 您可以使用$1、$2之類的規則運算式群組參考。 此外,此模式支援的關鍵字如 {designPath} 會在匯入期間以實際值來解析。 |
登陸頁面登入前置處理器目前的限制:
如果您需要對搜尋模式進行任何變更,在開啟felix屬性編輯器時,您需要手動新增反斜線字元以逸出規則運算式中繼字元。 如果您未手動新增反斜線字元,則規則運算式會被視為無效,且不會取代舊的。
例如,如果預設設定為
>/\* *CQ_DESIGN_PATH *\*/ *(['"])
而且您需要取代 CQ_DESIGN_PATH
替換為 VIPURL
在搜尋模式中,您的搜尋模式應該如下所示:
/\* *VIPURL *\*/ *(['"])
匯入設計封裝時,您可能會遇到數個錯誤,如本節所述。
如果設計套件包含parsys元件標籤,則在匯入後,sidekick會開始顯示登陸頁面相關元件。 您可以將新元件拖放至登陸頁面內的parsys元件上。 您也可以前往設計模式並將新元件新增到Sidekick。
如果發生任何錯誤(例如,匯入的封裝不是有效的zip),則設計匯入不會匯入封裝。 相反地,錯誤訊息會顯示在頁面頂端拖放方塊的上方。 此處列出錯誤情況的範例。 更正錯誤後,您可以將更新後的zip檔案重新匯入相同的空白登陸頁面上。 擲回錯誤的不同情況如下:
如果有任何警告(例如HTML參照封裝內不存在的影像),設計匯入工具會匯入zip,但同時在結果窗格中顯示問題/警告清單,按一下問題連結會顯示警告清單,指出設計封裝內的任何問題。 設計匯入工具攔截到並顯示警告的不同情況如下:
匯入登入頁面後,設計套件中的檔案(影像、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>
在類別上套用CSS box
如下所示:
.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
是用於design importer,因此產生的登陸頁面似乎並未保留格式。 為了解決這個問題,AEM在CSS中新增div標籤,並據此重寫程式碼。 否則,某些CSS規則將無效。
.box img
{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }
此外,設計人員應該注意,只有中的程式碼 id=cqcanvas 標籤會由匯入工具識別,否則不會保留設計。