本節說明如何設定,並視需要為登錄頁面擴充設計匯入工具。 匯入後使用登錄頁面在 登陸頁面。
讓設計匯入工具擷取自訂元件
以下是讓設計匯入工具辨識自訂元件的邏輯步驟
建立TagHandler
建立其對應的TagHandlerFactory。
如果您想要覆寫預設值,請確定您的TagHandlerFactory有更好的排名。
設計匯入工具,用於匯入登錄頁面, 已於AEM 6.5中淘汰.
建立匯入工具頁面後,您可以匯入完整的HTML登陸頁面。 若要匯入HTML登錄頁面,您必須先將其內容壓縮至設計套件中。 設計套件包含您的HTML登陸頁面以及參考的資產(影像、css、圖示、指令碼等)。
以下速查表提供了如何準備導入HTML的示例:
登錄頁面速查表
此時,ZIP檔案只能包含一個HTML頁面或一個頁面的一部分。
郵遞區號的範例配置如下:
版面是以「HTML5模板最佳實務」版面為基礎。 如需詳細資訊,請參閱 https://html5boilerplate.com/
至少,設計包 必須 包含 index.html 檔案。 如果要匯入的登錄頁面也有行動版本,則郵遞區號必須包含 mobile.index.html 與 index.html 在根層級。
若要匯入HTML,您需要將畫布div新增至登錄頁面HTML。
畫布div是html div with 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元件。 如需詳細說明,請參閱 登錄頁面元件.
HTML標籤可將登錄頁面的部分轉換為AEM元件,其格式長且標籤聲明簡短。 每個元件都會說明兩者。
匯入前,請注意下列限制:
如果任何屬性(例如,ID或類別)已套用至Body標籤上 <body id="container">
則匯入後不會保留。 因此,所匯入的設計不應對套用於 <body>
標籤。
Internet Explorer和Firefox 3.6版及舊版不支援拖放郵遞區號上傳。 若要在使用這些瀏覽器時上傳設計,請按一下拖放檔案區域以開啟檔案上傳對話方塊,然後使用該對話方塊上傳您的設計。
支援「拖放」設計zip的瀏覽器為Chrome、Safari5.x、Firefox 4及更新版本。
Modernizr.js
是以javascript為基礎的工具,可偵測瀏覽器的原生功能,並偵測它們是否適合html5元素。 使用Modernizr來增強舊版不同瀏覽器支援的設計,可能會在登錄頁面解決方案中造成匯入問題。 Modernizr.js
設計匯入工具不支援指令碼。
任何頁面屬性(例如自訂網域、強制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
已建立文本元件的屬性,包含在 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
.標題元件支援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中加入上述標籤,會執行下列操作:
sling:resourceType=foundation/components/image
),在匯入設計套件後建立的登錄頁面中。fileReference
已建立映像元件的屬性,指向在src屬性中指定的映像被導入的路徑。alt
屬性的值(在img標籤中)。title
屬性中的值。width
屬性中的width屬性值。height
屬性中的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、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>
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中加入上述標籤會執行下列動作:
目標元件會顯示頁面上的體驗內容。 您可以在促銷活動中建立許多體驗,而目標元件可動態地顯示來自不同體驗的內容給造訪頁面的不同使用者。
要插入目標元件,以及在促銷活動中建立不同體驗的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中建立新範本的步驟 此處.
假設您有要在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。
公開可透過OSGI控制台設定之屬性的元件如下:
下表簡要說明了這些屬性:
Component | 屬性名稱 | 屬性說明 |
登陸頁面設計匯入工具 | 擷取篩選器 | 用於從擷取中篩選檔案的規則運算式清單。 與任何指定模式相符的郵遞區號項目會從解壓縮中排除 |
登陸頁面產生器 | 檔案模式 | 登錄頁面產生器可設定為處理符合由檔案模式定義之規則運算式的HTML檔案。 |
行動登陸頁面產生器 | 檔案模式 | 登錄頁面產生器可設定為處理符合由檔案模式定義之規則運算式的HTML檔案。 |
裝置群組 | 要支援的設備組清單。 | |
登錄頁條目預處理器 | 搜尋模式 | 要在存檔條目內容中搜索的模式。 此規則運算式逐行與登入內容相符。 匹配後,匹配的文本將替換為指定的替換模式。 請參閱以下關於登錄頁面條目預處理程式的當前限制的備注。 |
取代圖樣 | 取代找到之相符項目的模式。 您可以使用規則運算式群組參考,例如$1、$2。 此外,此模式支援在匯入期間以實際值解析的關鍵字,如{designPath}。 |
登錄頁條目預處理器的當前限制:
如果您需要對搜尋模式進行任何變更,當您開啟felix屬性編輯器時,需要手動新增反斜線字元以逸出規則運算式中繼字元。 如果您不手動新增反斜線字元,則規則運算式會視為無效,且不會取代舊的字元。
例如,如果預設設定為
/\* *CQ_DESIGN_PATH *\*/ *(['"])
你需要替換 >CQ_DESIGN_PATH
with 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
在設計匯入工具中使用,產生的登錄頁面似乎並未保留格式。 若要解決此問題,請注意AEM在CSS中新增div標籤,並據此重寫程式碼。 否則,某些CSS規則將會無效。
.box img
{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }
此外,設計人員應注意,只有 id=cqcanvas 標籤是匯入工具所識別,否則不會保留設計。