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(最大宽度:767px){ |
responsive-480px.css | 所有媒体的样式宽度小于481像素。 | @media(最大宽度: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服务。 另一个页面配置控制显示在Devices列表中的设备列表。
当您的页面包含呈现设备列表的JSP脚本时,设备列表会显示在Sidekick中。 要将Devices列表添加到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建议的图片元素使用媒体查询来确定要用于图像元素的源。 图片元素使用元素属性将媒体查询与图像路径关联。
可免费使用的picturel.js库提供与建议的picture
元素类似的功能,并且使用类似的策略。 picturepill.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
客户端库文件夹(category = jquery)启用提示: 您可以通过嵌入来自动连接多个客户端库 文件夹。
HTML
创建一个组件,以生成picturepirl.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和Picturerjavascript库(或类似库)来评估媒体选择器。
处理图像请求的Servlet需要执行以下任务:
可用的解决方案
AEM会安装以下可使用或扩展的实施。
自适应图像组件生成对自适应图像组件Servlet的调用,以渲染根据设备屏幕大小调整的图像。 该组件包括以下资源:
cq:ClientLibraryFolder
文件夹,用于组合matchMedia polyfill javascript库和修改后的Picturel javascript库。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
变量包含当前资源的路径(自适应图像组件节点)。 该代码会生成一系列具有以下结构的div
元素:
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
data-scr
属性的值是一个URL,Sling会解析为可呈现图像的自适应图像组件Servlet。 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接受有限数量的图像尺寸和质量值。
默认支持以下值(宽xheight):
支持以下图像质量值:
使用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
方法并实现确定要渲染的图像资源的逻辑。 方法将检索名为image
的页面jcr:content
节点的子节点。 从此image
节点创建Image对象,getFileReference
方法从图像节点的fileReference
属性返回到图像文件的路径。
com.day.cq.commons.DownloadResource类提供getFileReferencemethod。
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*
类定义CSS样式,这些类是row-fluid
类的子类。 媒体查询允许根据不同视区大小重新定义样式。
以下示例CSS是这些样式的子集。 此子集重点关注span12
、span8
和span4
类,以及两种视区大小的媒体查询。 请注意CSS的以下特性:
.span
样式使用绝对数字定义元素宽度。.row-fluid .span*
样式将元素宽度定义为父项的百分比。 百分比是使用绝对宽度计算的。Geometrixx Media示例将Bootstrap javascript框架集成到其流式网格实现中。 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代码实施此行为的样式:
media-welcome页面的默认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应用程序实施网格。