此部分介绍如何针对登录页面配置和扩展(如果需要)设计导入程序。登陆页面中介绍了导入后使用登陆页面。
使设计导入程序提取自定义组件
以下是使设计导入程序识别自定义组件的逻辑步骤
创建TagHandler
创建其相应的TagHandlerFactory。
如果要覆盖默认值,请确保TagHandlerFactory具有更好的排名。
创建导入程序页面后,可以导入完整的HTML登录页面。 要导入 HTML 登录页面,需要首先将其内容压缩到设计包中。设计包包含 HTML 登录页面以及引用的资产(图像、css、图标、脚本,等等)。
以下备忘录提供了如何准备导入 HTML 的示例:
登陆页面备忘单
目前,ZIP 文件只包含一个 HTML 页面或页面的一部分。
zip 文件的示例布局如下所示:
该布局基于 HTML5 Boilerplate 最佳实践布局。有关更多信息,请访问https://html5boilerplate.com/
设计包必须至少在根级别包含index.html文件。 如果要导入的登陆页面也具有移动版本,则zip文件必须在根级别包含mobile.index.html以及index.html。
为了能够导入 HTML,需要向登录页面 HTML 添加画布 div。
画布div是带有id="cqcanvas"
的html div,必须插入到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 标记同时具有长格式和短标记声明。将分别介绍每个组件的这两种形式。
导入之前,请注意以下限制:
如果对body标记(例如<body id="container">
)应用了id或类等任何属性,则导入后不会保留该属性。 因此,导入的设计不应与<body>
标记上应用的属性有任何依赖关系。
Internet Explorer和Firefox版本3.6及更早版本不支持拖放zip上传。 要在使用这些浏览器时上传设计,请单击放置文件区域,打开文件上传对话框,然后使用该框上传您的设计。
支持设计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
内包含的HTML。短组件标记声明:
<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 中插入图像组件 (foundation/components/image) 的 HTML 标记:
<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标记中标题属性的值。width
属性设置为img标记中宽度属性的值。height
属性设置为img标记中高度属性的值。短组件标记声明:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
如果尝试对具有绝对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 组件:
该 CTA 组件可用于在登陆页面上添加文本链接。
支持的属性
用于在导入的 zip 文件中包含点进组件的 HTML 标记。此处的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。它是“行动动员”组的一部分。
支持的属性
用于在导入的 zip 文件中包含图形链接组件的 HTML 标记。此处的href将映射到目标url,img src将作为渲染图像,“标题”将被用作悬停文本,依此类推。
<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>
要创建clickthroughgraphical链接,您需要将锚点标记和图像标记包含在具有data-cq-component="clickthroughgraphicallink"
属性的div中。
例如<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潜在客户表单”组的一部分。
支持的功能
预定义潜在客户字段 — Sidekick中提供了名字、姓氏、地址、Dob、性别、关于、userId、emailId、提交按钮。 只需将所需的组件拖放到您的潜在客户表单即可。
借助于这些组件,作者可以设计独立的潜在客户表单,这些字段与潜在客户表单字段相对应。在独立或导入的zip应用程序中,用户可以使用cq:form或cta潜在客户表单字段添加其他字段,并根据要求对其进行命名和设计。
使用CTA潜在客户表单的特定预定义名称映射潜在客户表单字段,例如,firstName表示潜在客户表单中的名字,等等。
未映射到潜在客户表单的字段将映射到 cq:form 组件 - 文本、单选按钮、复选框、下拉框、隐藏、密码。
用户可以使用“标签”标记提供标题,使用样式属性“类”提供样式(仅适用于 CTA 潜在客户表单组件)。
感谢页面和订阅列表可作为表单的隐藏参数提供(在index.htm中提供),也可从“潜在客户表单的开头”的编辑栏添加/编辑
<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you" />
<input type="hidden" name="groupName" value="leadForm" />
约束(如 — 必需)可通过每个组件的编辑配置来提供。
用于在导入的 zip 文件中包含图形链接组件的 HTML 标记。此处的“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 组件,或从中删除可编辑的 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 | 紧贴在 E 元素之后的 F 元素 | 相邻同级组合器 |
E ~ F | E 元素之后的 F 元素 | 一般同级组合器 |
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中添加了其他HTML元素,如<div>标记。
公开可通过OSGi控制台配置的属性的组件如下所示:
下表简要说明了这些属性:
组件 | 属性名称 | 属性描述 |
登录页面设计导入程序 | 提取过滤器 | 用于从提取中过滤文件的正则表达式列表。 与任一指定模式匹配的 Zip 条目将从提取中排除 |
登录页面生成器 | 文件模式 | 登陆页面生成器可配置为处理与文件模式定义的正则表达式匹配的HTML文件。 |
移动登录页面生成器 | 文件模式 | 登陆页面生成器可配置为处理与文件模式定义的正则表达式匹配的HTML文件。 |
设备组 | 要提供支持的设备组列表。 | |
登录页面条目处理器 | 搜索模式 | 用于在归档条目内容中进行搜索的模式。此正则表达式与条目内容逐行匹配。 匹配后,匹配的文本将被指定的替换模式替换。 请参阅下方有关登录页面条目处理器当前限制的注释。 |
替换模式 | 替换找到的匹配项的模式。您可以使用正则表达式组引用,如$1、$2。 此外,此模式还支持在导入期间使用实际值解析的关键字,如{designPath}。 |
登录页面条目处理器的当前限制:
如果需要对搜索模式做任何更改,则在打开 felix 属性编辑器时,需要手动添加反斜杠字符,以对正则表达式元字符进行转义。如果未手动添加反斜杠字符,正则表达式将被视为无效,而不会替换旧的正则表达式。
例如,如果默认配置为
/\&ast *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>
对类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标记内的代码,否则不会保留设计。