Adobe建议对需要基于单页应用程序框架的客户端渲染(如_React_)的项目使用SPA编辑器。 了解更多。
设计网页,使其适应显示它们的客户端视图。 通过响应式设计,可以在多种设备上以两种方向有效地显示相同的页面。 下图演示了页面对视图端口大小更改做出响应的一些方式:
开发Adobe Experience Manager(AEM)应用程序,它们生成可适应多种窗口大小和方向的HTML5页面。 例如,以下视区宽度范围与各种设备类型和方向相对应
有关实施响应式设计行为的信息,请参阅以下主题:
在设计时,使用Sidekick预览页面,使其适合各种屏幕大小。
在开发支持网页的AEM应用程序之前,应该做出一些设计决策。 例如,您需要具有以下信息:
典型的AEM应用程序结构支持所有响应式设计实现:
媒体查询支持选择性地使用CSS样式进行页面渲染。 AEM开发工具和功能使您能在应用程序中有效、高效地实施媒体查询。
W3C组提供媒体查询推荐,用于描述此CSS3功能和语法。
在CSS文件中,根据目标设备的属性定义媒体查询。 以下实施策略对于管理每个媒体查询的样式非常有效:
We.Retail Media范例使用此策略定义网站设计中的样式。 We.Retail使用的CSS文件位于*/apps/weretail/clientlibs/clientlib-site/less/grid.less
。
下表列表了css子文件夹中的文件。
文件名 | 描述 | 媒体查询 |
---|---|---|
style.css | 常见样式。 | 不适用 |
bootstrap.css | 通用样式,由TwitterBootstrap定义。 | 不适用 |
responsive-1200px.css | 所有宽度或宽度为1200像素的媒体的样式。 | @media(最小宽度:1200px){ |
responsive-980px-1199px.css | 980到1199像素宽的媒体样式。 | @media(最小宽度:980px)和(最大宽度:1199px){ |
responsive-768px-979px.css | 宽度在768到979像素之间的媒体样式。 | @media(最小宽度:768px)和(最大宽度:979px){ |
responsive-767px-max.css | 宽度小于768像素的所有媒体的样式。 | @media(max-width:767px){ |
responsive-480px.css | 宽度小于481像素的所有媒体的样式。 | @media(max-width:480){ ... } |
/etc/designs/weretail/clientlibs
文件夹中的css.txt文件将列表客户端库文件夹包含的CSS文件。 文件的顺序实现样式优先级。 随着设备大小的减小,样式会更加具体。
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
提示:描述性文件名可让您轻松识别目标视区大小。
在页面组件的JSP脚本中包含客户端库文件夹,以生成包含媒体查询的CSS文件,并引用该文件。
<ui:includeClientLib categories="apps.weretail.all"/>
apps.weretail.all
客户端库文件夹嵌入clientlibs库。
JSP脚本生成引用样式表的以下HTML代码:
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
查看预览不同视区大小的页面,以测试响应式设计的行为。 在预览模式中,Sidekick包含用于选择设备的设备下拉菜单。 选择设备时,页面会随视口大小而改变。
要在Sidekick中启用设备预览,必须配置页面和MobileEmulatorProvider服务。 另一页面配置控制显示在设备列表中的设备列表。
当您的页面包含呈现设备列表的JSP脚本时,设备列表显示在Sidekick中。 要将设备列表添加到Sidekick,请在页面的head
部分包含/libs/wcm/mobile/components/simulator/simulator.jsp
脚本。
在定义head
部分的JSP中包含以下代码:
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>
要查看示例,请以CRXDE Lite打开/apps/weretail/components/page/head.jsp
文件。
要使设备模拟器能够支持您的页面,请使用MobileEmulatorProvider工厂服务注册您的页面组件并定义mobile.resourceTypes
属性。
与AEM合作时,有多种方法管理此类服务的配置设置;有关详细信息,请参阅配置OSGi。
例如,要在应用程序中创建 [sling:OsgiConfig](/docs/experience-manager-64/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository)
节点:
父文件夹:/apps/application_name/config
名称: com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
- *alias*
后缀是必需的,因为MobileEmulatorProvider服务是工厂服务。 使用此工厂唯一的别名。
jcr:primaryType: sling:OsgiConfig
添加以下节点属性:
名称: mobile.resourceTypes
类型: String[]
值:呈现网页的页面组件的路径。 例如,geometrixx-media应用程序使用以下值:
geometrixx-media/components/page
geometrixx-unlimited/components/pages/page
geometrixx-unlimited/components/pages/coverpage
geometrixx-unlimited/components/pages/issue
要指定在“设备”列表中显示的设备组,请将cq:deviceGroups
属性添加到站点根页面的jcr:content
节点。 属性的值是指向设备组节点的路径数组。
设备组节点位于/etc/mobile/groups
文件夹中。
例如,Geometrixx Media站点的根页面为/content/geometrixx-media
。 /content/geometrixx-media/jcr:content
节点包含以下属性:
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
使用“工具”控制台创建和编辑设备组。
对于用于响应式设计的设备组,请编辑设备组,并在“常规”选项卡上选择“禁用模拟器”。 此选项可防止显示模拟器轮盘,这与响应式设计无关。
您可以使用媒体查询选择要在页面中显示的图像资源。 但是,每个使用媒体查询来调整其使用的资源都会下载到客户端。 媒体查询仅确定是否显示下载的资源。
对于图像等大型资源,下载所有资源并非有效使用客户端的数据管道。 要有选择地下载资源,请在媒体查询执行选择后使用javascript启动资源请求。
以下策略加载使用媒体查询选择的单个资源:
W3C定义的MediaQueryList接口的实现使您能够使用javascript评估媒体查询。 可以将逻辑应用于媒体查询结果并执行针对当前窗口的脚本:
实现MediaQueryList接口的浏览器支持window.matchMedia()
函数。 此函数针对给定的字符串测试媒体查询。 函数返回一个MediaQueryList
对象,该对象提供对查询结果的访问。
对于不实现该接口的浏览器,可以使用matchMedia()
聚合填充,如matchMedia.js,一个免费可用的javascript库。
W3C建议的图片元素使用媒体查询确定要用于图像元素的源。 图片元素使用元素属性将媒体查询与图像路径关联。
可自由使用的picturelin.js库提供与建议的picture
元素类似的功能,并使用类似的策略。 pictureincl.js库调用window.matchMedia
来评估为一组div
元素定义的媒体查询。 每个div
元素还指定一个图像源。 当div
元素的媒体查询返回true
时,将使用源。
picturefill.js
库需要与以下示例类似的HTML代码:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
</div>
呈现页面时,picturefull.js将插入一个img
元素作为<div data-picture>
元素的最后一个子元素:
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
<img src="path to medium image">
</div>
在AEM页面中,data-src
属性的值是存储库中资源的路径。
要在AEM应用程序中实现自适应图像,您需要添加所需的javascript库,并在页面中包含所需的HTML标记。
库
获取以下javascript库并将其包含在客户端库文件夹中:
/etc/clientlibs/granite/jquery
客户端库文件夹(类别= jquery)可用提示: 您可以通过嵌入自动连接多个客户端库文 件夹。
HTML
创建一个组件,它生成pictureincl.js代码需要的所需div元素。 在AEM页中,data-src属性的值是存储库中资源的路径。 例如,页面组件可以在DAM中硬编码媒体查询和图像演绎版的关联路径。 或者,创建一个自定义图像组件,使作者能够选择图像演绎版或指定运行时渲染选项。
以下示例HTML从同一图像的2个DAM演绎版中进行选择。
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
自适应图像基础组件实现自适应图像:
/libs/foundation/components/adaptiveimage/clientlibs
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
后续部分提供有关此组件的详细信息。
要自定义图像渲染,您应了解默认的AEM静态图像渲染实现。 AEM提供图像组件和图像渲染servlet,它们可以协同工作来渲染网页的图像。 当图像组件包含在页面的段落系统中时,会出现以下事件序列:
例如,图像组件的JSP会生成以下HTML元素:
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">
当浏览器加载页面时,它使用src属性的值作为URL请求图像。 Sling解压缩URL:
/content/mywebsite/en/_jcr_content/par/image_0
.jpg
img
1358372073597.jpg
image_0
节点的jcr:resourceType
值为foundation/components/image
,sling:resourceSuperType
值为foundation/components/parbase
。 parbase组件包括img.GET.java脚本,该脚本与选择器和请求URL的文件扩展名匹配。 CQ使用此脚本(servlet)呈现图像。
要查看脚本的源代码,请使用CRXDE Lite打开/libs/foundation/components/parbase/img.GET.java
文件。
根据客户端视口的特性在运行时缩放图像,以提供符合响应式设计原则的图像。 使用Servlet和创作组件,将设计模式与静态图像渲染使用相同。
组件需要执行以下任务:
div
元素,其中包含用于渲染图像的媒体选择器和服务调用。Web客户端使用matchMedia和Pictureincljavascript库(或类似库)来评估媒体选择器。
处理图像请求的Servlet需要执行以下任务:
可用的解决方案
AEM会安装以下可使用或扩展的实施。
自适应图像组件生成对自适应图像组件Servlet的调用,以渲染根据设备屏幕调整大小的图像。 该组件包含以下资源:
cq:ClientLibraryFolder
,它组合了matchMediapolyfill javascript库和修改后的Pictureincljavascript库。cq:editConfig
节点将覆盖CQ基础图像组件,以便放置目标创建自适应图像组件而不是基础图像组件。adaptive-image.jsp脚本包含以下生成div元素和媒体查询的代码:
<div data-picture data-alt='<%= alt %>'>
<div data-src='<%= path + ".img.320.low." + extension + suffix %>' data-media="(min-width: 1px)"></div> <%-- Small mobile --%>
<div data-src='<%= path + ".img.320.medium." + extension + suffix %>' data-media="(min-width: 320px)"></div> <%-- Portrait mobile --%>
<div data-src='<%= path + ".img.480.medium." + extension + suffix %>' data-media="(min-width: 321px)"></div> <%-- Landscape mobile --%>
<div data-src='<%= path + ".img.476.high." + extension + suffix %>' data-media="(min-width: 481px)"></div> <%-- Portrait iPad --%>
<div data-src='<%= path + ".img.620.high." + extension + suffix %>' data-media="(min-width: 769px)"></div> <%-- Landscape iPad --%>
<div data-src='<%= path + ".img.full.high." + extension + suffix %>' data-media="(min-width: 1025px)"></div> <%-- Desktop --%>
<%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
<noscript>
<img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
</noscript>
</div>
path
变量包含当前资源(adaptive-image组件节点)的路径。 该代码生成具有以下结构的一系列div
元素:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
data-scr
属性的值是Sling解析为用于呈现图像的自适应图像组件Servlet的URL。 data-media属性包含根据客户端属性评估的媒体查询。
以下HTML代码是JSP生成的div
元素的示例:
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg' data-media="(min-width: 320px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg' data-media="(min-width: 321px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg' data-media="(min-width: 481px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg' data-media="(min-width: 769px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg' data-media="(min-width: 1025px)"></div>
如果自定义自适应图像组件并更改宽度选择器,则还必须配置自适应图像组件Servlet以支持宽度。
自适应图像组件Servlet根据指定的宽度调整JPEG图像的大小,并设置JPEG质量。
自适应图像组件Servlet绑定到默认的Sling Servlet,并支持。jpg、.jpeg、.gif和。png文件扩展名。 servlet选择器为img。
AEM中不支持动画。gif文件,以实现自适应再现。
因此,Sling会将以下格式的HTTP请求URL解析为此servlet:
*path-to-node*.img.*extension*
例如,Sling将URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg
的HTTP请求转发到自适应图像组件Servlet。
另外两个选择器指定所请求的图像宽度和JPEG质量。 以下示例请求宽度为480像素且中等质量的图像:
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
支持的图像属性
Servlet接受有限数量的图像宽度和质量。 默认支持以下宽度(以像素为单位):
完整值表示无缩放。
支持以下JPEG质量值:
数值分别为0.4、0.82和1.0。
更改默认支持的宽度
使用Web控制台(http://localhost:4502/system/console/configMgr)或sling:OsgiConfig节点配置Adobe CQ自适应图像组件Servlet支持的宽度。
有关如何配置AEM服务的信息,请参阅配置OSGi。
Web控制台 | sling:OsgiConfig | |
---|---|---|
服务或节点名称 | “配置”选项卡上的服务名称为Adobe CQ自适应图像组件Servlet | com.day.cq.wcm.foundation.impl。 AdaptiveImageComponentServlet |
属性 | 支持的宽度
|
adapt.supported.widths
|
com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet
类扩展了AbstractImageServlet类。 AdaptiveImageComponentServlet源代码位于/libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl
文件夹中。
该类使用Felix SCR注释配置servlet关联的资源类型和文件扩展名以及第一个选择器的名称。
@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value ={
"jpg",
"jpeg",
"png",
"gif"
}, propertyPrivate = true)
})
Servlet使用属性SCR注释设置默认支持的图像质量和尺寸。
@Property(value = {
"320", // iPhone portrait
"480", // iPhone landscape
"476", // iPad portrait
"620" // iPad landscape
},
label = "Supported Widths",
description = "List of widths this component is permitted to generate.")
AbstractImageServlet
类提供处理HTTP请求的doGet
方法。 此方法确定与请求关联的资源,从存储库中检索资源属性,并在ImageContext对象中返回它们。
com.day.cq.commons.DownloadResource类提供getFileReference method
,它检索资源的fileReference
属性的值。
AdaptiveImageComponentServlet
类覆盖createLayer
方法。 该方法从ImageContext
对象获得图像资源的路径和请求的图像宽度。 然后,它调用info.geometrixx.commons.impl.AdaptiveImageHelper
类的方法,它执行实际的图像缩放。
AdaptiveImageComponentServlet类还覆盖writeLayer方法。 此方法将JPEG质量应用于图像。
示例图像引用修改Servlet为img元素生成大小属性以在网页上缩放图像。
Servlet绑定到cq:page
资源并支持。jpg文件扩展名。 servlet选择器为image
。 因此,Sling会将以下格式的HTTP请求URL解析为此servlet:
path-to-page-node.image.jpg
例如,Sling将URL http://localhost:4502/content/geometrixx/en.image.jpg
的HTTP请求转发到图像引用修改Servlet。
另外三个选择器指定所请求的图像宽度、高度和(可选)质量。 以下示例请求宽度为770像素、高度为360像素且图像质量中等。
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
支持的图像属性
Servlet接受有限数量的图像尺寸和质量值。
默认情况下支持以下值(widthxheight):
支持以下图像质量值:
与AEM合作时,有多种方法管理此类服务的配置设置;有关详细信息,请参阅配置OSGi。
图像路径、尺寸和质量值必须作为节点的属性存储在存储库中:
节点名称为image
。
父节点是cq:page
资源的jcr:content
节点。
图像路径存储为名为fileReference
的属性的值。
创作页面时,请使用Sidekick指定图像并将image
节点添加到页面属性:
info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet类扩展AbstractImageServlet类。 如果已安装cq-geometrixx-commons-pkg包,则ImageReferenceModificationServlet源代码位于/apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets
文件夹中。
该类使用Felix SCR注释配置servlet关联的资源类型和文件扩展名以及第一个选择器的名称。
@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})
Servlet使用属性SCR注释设置默认支持的图像质量和尺寸。
@Property(label = "Image Quality",
description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
"256x192", // Category page article list images
"370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
"480x200", // "Most popular" phone
"127x127", // article summary phone square images
"770x360", // article summary, desktop
"620x290", // article summary, tablet
"480x225", // article summary, phone (landscape)
"320x150", // article summary, phone (portrait) and fallback
"375x175", // 2-column article summary, desktop
"303x142", // 2-column article summary, tablet
"1170x400", // carousel, full
"940x340", // carousel min-width: 980px
"770x300", // carousel min-width: 768px
"480x190" // carousel min-width: 480px
},
label = "Supported Resolutions",
description = "List of resolutions this component is permitted to generate.")
AbstractImageServlet
类提供处理HTTP请求的doGet
方法。 此方法确定与调用关联的资源,从存储库检索资源属性,并将它们保存在ImageContext对象中。
ImageReferenceModificationServlet
类覆盖createLayer
方法并实现确定要渲染的图像资源的逻辑。 该方法检索页面jcr:content
节点的名为image
的子节点。 从此image
节点创建Image对象,getFileReference
方法从图像节点的fileReference
属性返回图像文件的路径。
com.day.cq.commons.DownloadResource类提供getFileReference方法。
AEM使您能够高效、有效地实施流体网格。 本页介绍如何将自适应网格或现有网格实现(如Bootstrap)集成到AEM应用程序中。
如果您不熟悉流体网格,请参阅本页底部的流体网格简介部分。 本文概述了流体网格及其设计。
使用页面组件生成定义页面内容块的HTML元素。 页面引用的ClientLibraryFolder提供控制内容块布局的CSS:
例如,示例geometrixx-media应用程序包含media-home组件。 此页组件插入两个脚本,它们生成类row-fluid
的两个div
元素:
第一行包含类span12
的div
元素(内容跨12列)。 div
元素包含parsys组件。
第二行包含两个div
元素,一个是类span8
,另一个是类span4
。 每个div
元素都包含parsys组件。
<div class="page-content">
<div class="row-fluid">
<div class="span12">
<cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
</div>
</div>
<div class="row-fluid">
<div class="span8">
<cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
</div>
<div class="span4">
<cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
</div>
</div>
</div>
当组件包括多个引用parsys组件的cq:include
元素时,每个path
属性必须具有不同的值。
与geometrixx-media页面组件(/etc/designs/geometrixx-media
)关联的设计包含clientlibs
ClientLibraryFolder。 此ClientLibraryFolder定义row-fluid
类、span*
类和span*
类(属于row-fluid
类的子类)的CSS样式。 媒体查询可针对不同的视图端口大小重新定义样式。
以下示例CSS是这些样式的子集。 此子集侧重于span12
、span8
和span4
类,以及两种视区大小的媒体查询。 请注意CSS的以下特性:
.span
样式使用绝对数字定义元素宽度。.row-fluid .span*
样式将元素宽度定义为父项的百分比。 百分比是根据绝对宽度计算的。Geometrixx Media示例将Bootstrapjavascript框架集成到其自适应网格实现中。 Bootstrap框架提供bootstrap.css文件。
/* default styles (no media queries) */
.span12 { width: 940px }
.span8 { width: 620px }
.span4 { width: 300px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.95744680851064% }
.row-fluid .span4 { width: 31.914893617021278% }
@media (min-width: 768px) and (max-width: 979px) {
.span12 { width: 724px; }
.span8 { width: 476px; }
.span4 { width: 228px; }
.row-fluid .span12 { width: 100%;}
.row-fluid .span8 { width: 65.74585635359117%; }
.row-fluid .span4 { width: 31.491712707182323%; }
}
@media (min-width: 1200px) {
.span12 { width: 1170px }
.span8 { width: 770px }
.span4 { width: 370px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.81196581196582% }
.row-fluid .span4 { width: 31.623931623931625% }
}
示例Geometrixx Media应用程序的页面在宽视区中水平分布内容块行。 在较小的视口中,相同的块垂直分布。 以下示例CSS显示了为媒体主页组件生成的HTML代码实现此行为的样式:
媒体欢迎页面的默认CSS为位于row-fluid
类内的span*
类分配float:left
样式。
较小视口的媒体查询为相同类指定float:none
样式。
/* default styles (no media queries) */
.row-fluid [class*="span"] {
width: 100%;
float: left;
}
@media (max-width: 767px) {
[class*="span"], .row-fluid [class*="span"] {
float: none;
width: 100%;
}
}
将组件模块化以有效地使用代码。 您的站点可能使用几种不同类型的页面,如欢迎页面、文章页面或产品页面。 每种类型的页面都包含不同类型的内容,并可能使用不同的布局。 但是,当每个布局的某些元素在多个页面中是通用的时候,您可以重复使用实现该布局部分的代码。
使用页面组件叠加
创建一个主页组件,它提供用于生成页面各个部分的脚本,如主体中的head
和body
部分以及header
、content
和footer
部分。
创建使用主页组件作为cq:resourceSuperType
的其他页面组件。 这些组件包括根据需要覆盖主页脚本的脚本。
例如,goemetrixx-media应用程序包含页面组件(sling:resourceSuperType
是基础页面组件)。 几个子组件(如文章、类别和媒体主页)将此页面组件用作sling:resourceSuperType
。 每个子组件都包含一个content.jsp文件,它覆盖页面组件的content.jsp文件。
重用脚本
创建多个JSP脚本,它们生成多个页面组件通用的行和列组合。 例如,文章的content.jsp
脚本和media-home组件都引用了8x4col.jsp
脚本。
按目标视区大小组织CSS样式
在单独的文件中包含针对不同视图端口大小的CSS样式和媒体查询。 使用客户端库文件夹连接它们。
当组件生成一个内容块时,通常页面组件创建的网格控制内容的位置。
作者应注意内容块可以以各种大小和相对位置呈现。 内容文本不应使用相对方向来引用其他内容块。
如果需要,组件应提供其生成的HTML代码所需的任何CSS或javascript库。 使用组件中的客户端库文件夹生成CSS和JS文件。 要公开文件,创建依赖项或将库嵌入/etc文件夹下的另一个客户端库文件夹中。
子网格
如果组件包含多个内容块,则在行内添加内容块以在页面上建立子网格:
例如,/apps/geometrixx-media/components/2-col-article-summary
组件生成两列内容。 它生成的HTML具有以下结构:
<div class="row-fluid mutli-col-article-summary">
<div class="span6">
<article>
<div class="article-summary-image">...</div>
<div class="social-header">...</div>
<div class="article-summary-description">...</div>
<div class="social">...</div>
</article>
</div>
</div>
页面CSS的.row-fluid .span6
选择器适用于此HTML中相同类和结构的div
元素。 但是,该组件还包括/apps/geometrixx-media/components/2-col-article-summary/clientlibs客户端库文件夹:
div
元素的multi-col-article-summary
类来覆盖页面的row-fluid
类的行为。例如,/apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css
文件中包含以下样式:
@media (max-width: 480px) {
.mutli-col-article-summary .article-summary-image {
float: left;
width: 127px;
}
.mutli-col-article-summary .article-summary-description {
width: auto;
margin-left: 127px;
}
.mutli-col-article-summary .article-summary-description h4 {
padding-left: 10px;
}
.mutli-col-article-summary .article-summary-text {
margin-left: 127px;
min-height: 122px;
top: 0;
}
}
流畅的网格使页面布局能够适应客户端视图的尺寸。 网格由逻辑列和行组成,它们将内容块放在页面上。
使用HTML5技术,您可以实施网格并处理网格以根据不同的视图端口大小调整页面布局:
div
元素包含跨若干列的内容块。对于要定位的每个视区宽度范围,请使用静态页面宽度和内容块的恒定宽度。 手动调整浏览器窗口大小时,内容大小的更改会在离散窗口宽度(也称为断点)发生。 因此,页面设计得到更加紧密的遵守,从而最大化用户体验。
使用网格缩放内容块以适应不同的视区大小。 内容块跨越特定数量的列。 随着列宽的增大或减小以适合不同的视区大小,内容块的宽度也相应地增大或减小。 缩放可支持大型和中型视区,这些视区足够宽以适应并排放置内容块。
内容块的大小可以受最小宽度的约束,超过该宽度缩放不再有效。 对于较小的视区,网格可用于垂直分布内容块,而不是水平分布。
确定在页面上放置内容块时需要的列和行。 页面布局决定跨网格的列数和行数。
列数
在所有布局中加入足够的列以水平放置内容块,以适应所有视区大小。 您应使用超出当前需要的列来适应将来的页面设计。
行内容
使用行控制内容块的垂直位置。 确定共享同一行的内容块:
创建CSS类和样式以控制页面上内容块的布局。 页面设计通常基于视图端口中内容块的相对大小和位置。 视区确定内容块的实际大小。 CSS需要考虑相对大小和绝对大小。 您可以使用三种类型的CSS类实现自适应网格:
div
元素的类,它是所有行的容器。 此类设置网格的绝对宽度。div
元素的类。 此类控制其包含的内容块的水平或垂直位置。div
元素的类,它们表示不同宽度的内容块。 宽度以父项(行)的百分比表示。目标视区宽度(及其关联的媒体查询符)可划分用于页面布局的离散宽度。
通常,内容块类的width
样式基于页面和网格的以下特征:
CSS包括使用以下结构的一系列媒体查询:
@media(query_for_targeted_viewport){
.class_for_container{ width:absolute_page_width }
.class_for_row { width:100%}
/* several selectors for content blocks */
.class_for_content_block1 { width:absolute_block_width1 }
.class_for_content_block2 { width:absolute_block_width2 }
...
/* several selectors for content blocks inside rows */
.class_for_row .class_for_content_block1 { width:relative_block_width1 }
.class_for_row .class_for_content_block2 { width:relative_block_width2 }
...
}
使用以下算法作为开发页面元素类和CSS样式的起点。
为包含所有行的div元素定义类名,例如content.
为表示行的div元素(如row-fluid
)定义CSS类。
为内容块元素定义类名。 对于所有可能的宽度,以列跨度计,都需要一个类。 例如,对于跨3列的div
元素,请使用span3
类,对于跨4列的span4
类。 定义网格中列数不限的类。
对于要定位的每个视区大小,将相应的媒体查询添加到CSS文件。 在每个媒体查询中添加以下项目:
content
类的选择器,例如.content{}
。.span3{ }
。row-fluid
类的选择器,例如.row-fluid{ }
.row-fluid span3 { }
。为每个选择器添加宽度样式:
content
选择器的宽度设置为页面的绝对大小,例如width:480px
。(absolute width of page)/(number of columns)
。.row-fluid .span
选择器的宽度设置为总宽度的百分比。 使用(absolute span width)/(absolute page width)*100
公式计算此宽度。使用.row-fluid
类的浮动样式控制行中的内容块是水平排列还是垂直排列。
float:left
或float:right
样式导致子元素(内容块)的水平分布。
float:none
样式导致子元素的垂直分布。
将样式添加到每个媒体查询中的.row-fluid
选择器。 根据您用于该媒体查询的页面布局设置值。 例如,下图说明了一行,它为宽视区水平分发内容,为窄视区垂直分发内容。
以下CSS可以实现此行为:
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
对于要定位的每个视区大小的页面布局,确定每个内容块跨越的列数。 然后,确定用于这些内容块的div元素的类。
建立div类后,可以使用AEM应用程序实现网格。