为移动设备创建站点

创建移动站点与创建标准站点类似，因为它还涉及创建模板和组件。 有关创建模板和组件的更多详细信息，请参阅以下页面：模板、组件和开发AEM Sites快速入门。 主要区别在于在网站中启用AEM内置移动功能。 它是通过创建依赖于移动页面组件的模板来实现的。

您还应当考虑使用响应式设计创建一个可容纳多种屏幕大小的网站。

要开始使用此功能，您可以查看AEM中提供的​We.Retail Mobile演示网站。

要创建移动站点，请按如下步骤继续操作：

1. 创建页面组件：

   • 将sling:resourceSuperType属性设置为wcm/mobile/components/page

     这样，组件就依赖于移动页面组件。

   • 使用项目特定逻辑创建body.jsp。

2. 创建页面模板：

   • 将sling:resourceType属性设置为新创建的页面组件。
   • 设置allowedPaths属性。

3. 为网站创建设计页面。

4. 在/content节点下创建站点根页面：

   • 设置cq:allowedTemplates属性。
   • 设置cq:designPath属性。

5. 在站点根页面的页面属性中，在​Mobile​选项卡中设置设备组。

6. 使用新模板创建网站页面。

移动页面组件(/libs/wcm/mobile/components/page):

• 将​Mobile​选项卡添加到页面属性对话框。
• 通过head.jsp，它从请求中检索当前移动设备组，如果找到设备组，则使用该组的drawHead()方法包含设备组的关联模拟器初始组件（仅在创作模式下）和设备组的呈现CSS。

使用多站点管理器创建移动站点

使用多站点管理器(MSM)从标准站点创建移动Live Copy。 标准网站会自动转换为移动网站：移动站点具有移动站点的所有功能（例如，在模拟器中编辑），并且可以与标准站点同步进行管理。 请参阅“多站点管理器”页面中的“为不同渠道🔗创建Live Copy”一节。

服务器端移动API

包含移动类的Java包包括：

• com.day.cq.wcm.mobile.api — 定义MobileConstants。

• com.day.cq.wcm.mobile.api.device — 定义设备、设备组和设备组列表。

• com.day.cq.wcm.mobile.api.device.capability — 定义DeviceCapability。

• com.day.cq.wcm.mobile.api.wurfl — 定义WurflQueryEngine。

• com.day.cq.wcm.mobile.core — 定义MobileUtil，它提供了围绕WCM Mobile的各种实用工具方法。

移动设备组件

We.Retail移动设备演示网站​使用以下移动设备组件，这些组件位于/libs/foundation/components下：

创建移动组件

AEM Mobile框架允许开发对发出请求的设备敏感的组件。 以下代码示例显示了如何在组件jsp中使用AEM移动API，特别是如何：

• 从请求中获取设备：

  Device device = slingRequest.adaptTo(Device.class);

• 获取设备组：

  DeviceGroup deviceGroup = device.getDeviceGroup();

• 获取设备组功能：

  Collection<DeviceCapability> capabilities = deviceGroup.getCapabilities();

• 获取设备属性（WURFL数据库中的原始功能键/值）：

  Map<String,String> deviceAttributes = device.getAttributes();

• 获取设备用户代理：

  String userAgent = device.getUserAgent();

• 从当前页面获取设备组列表（作者分配给站点的设备组）：

  DeviceGroupList deviceGroupList = currentPage.adaptTo(DeviceGroupList.class);

• 检查设备组是否支持图像

  if (deviceGroup.hasCapability(DeviceCapability.CAPABILITY_IMAGES)) {
  …
  或者
  if MobileUtil.hasCapability(request, DeviceCapability.CAPABILITY_IMAGES) {
  …

模拟器

基于模拟器的创作为作者提供了创建面向移动设备客户端的内容页面的方法。 移动内容创作遵循与就地所见即所得(WYSIWYG)编辑相同的原则。 为了让作者感知移动设备上的页面外观，可使用设备模拟器编辑移动内容页面。

移动设备模拟器基于通用的模拟器框架。 有关更多详细信息，请参阅模拟器页面。

设备模拟器会在页面上显示移动设备，而常规的编辑（parsys、组件）则发生在设备的屏幕中。 设备模拟器取决于为站点配置的设备组。 可以将多个模拟器分配给设备组。 然后，内容页面上会提供所有模拟器。 默认情况下，将显示分配给站点的第一个设备组的第一个模拟器。 模拟器可以通过页面顶部的模拟器轮播或通过Sidekick的编辑按钮进行切换。

创建模拟器

要创建模拟器，请参阅通用模拟器页面中的创建自定义移动设备模拟器部分。

移动仿真器的主要特性

• 设备组由一个或多个模拟器之一组成：设备组配置页面，例如/etc/mobile/groups/touch，包含jcr:content节点下方的emulators属性。

  注意：虽然同一模拟器可能属于多个设备组，但这没有太大意义。

• 通过设备组的配置对话框，使用所需模拟器的路径设置emulators属性。 例如：/libs/wcm/mobile/components/emulators/iPhone4。

• 模拟器组件(例如，/libs/wcm/mobile/components/emulators/iPhone4)扩展基本移动模拟器组件(/libs/wcm/mobile/components/emulators/base)。

• 在配置设备组时，可以选择扩展基本移动模拟器的每个组件。 因此，可以轻松创建或扩展自定义模拟器。

• 在编辑模式下的请求时，将使用模拟器实施来呈现页面。

• 当页面的模板依赖于移动页面组件时，模拟器功能会自动集成到页面中（通过移动页面组件的head.jsp）。

设备组

移动设备组根据设备功能提供移动设备的分段。 设备组提供了在创作实例上基于模拟器进行创作以及在发布实例上正确呈现内容所需的信息：作者向移动设备页面添加内容并将其发布后，即可在发布实例中请求该页面。 在该视图中，内容页面将使用配置的一个设备组呈现，而不是模拟器编辑视图。 根据移动设备检测选择设备组。 然后，匹配设备组提供必要的样式信息。

设备组定义为/etc/mobile/devices下的内容页面，并使用​移动设备组​模板。 设备组模板用作内容页面形式的设备组定义的配置模板。 其主要特点是：

• 位置: /libs/wcm/mobile/templates/devicegroup
• 允许的路径：/etc/mobile/groups/*
• 页面组件：wcm/mobile/components/devicegroup

将设备组分配给您的站点

在创建移动设备网站时，您需要将设备组分配给您的网站。 AEM根据设备的HTML和JavaScript渲染功能提供了三个设备组：

• ​​功能手机，适用于Sony Ericsson W800等功能设备，支持基本HTML，但不支持图像和JavaScript。

• ​​智能手机，适用于Blackberry等支持基本HTML和图像的设备，但不支持JavaScript。

• ​​触屏，适用于iPad等完全支持HTML、图像、JavaScript和设备旋转的设备。

由于模拟器可以与设备组关联（请参阅创建设备组一节），因此将设备组分配给站点使作者能够在与设备组关联的模拟器之间进行选择，以编辑页面。

要将设备组分配给您的网站，请执行以下操作：

1. 在您的浏览器中，转到 Siteadmin 控制台。

2. 在​Websites​下方打开移动站点的根页面。

3. 打开页面属性。

4. 选择​Mobile​选项卡：

   • 定义设备组。
   • 单击​确定。

设备组筛选器

设备组筛选器定义了用于确定设备是否属于该组的基于功能的标准。 在创建设备组时，您可以选择用于评估设备的过滤器。

在AEM收到来自设备的HTTP请求时，与组关联的每个过滤器都会将设备功能与特定条件进行比较。 当设备具有过滤器所需的所有功能时，设备会被视为属于组。 功能从WURFL™数据库中检索。

设备组可以使用零个或多个过滤器进行功能检测。 此外，过滤器可以与多个设备组一起使用。 AEM提供了一个默认过滤器，用于确定设备是否具有为组选择的功能：

• CSS
• JPG和PNG图像
• JavaScript
• 设备旋转

如果设备组不使用过滤器，则为该组配置的选定功能是设备所需的唯一功能。

有关更多信息，请参阅创建设备组过滤器。

创建设备组

当安装的AEM组不符合您的要求时，请创建设备组。

1. 在浏览器中，转到​工具​控制台。

2. 在​工具 > 移动设备 > 设备组​下创建新页面。 在​创建页面​对话框中：

   • 作为​标题，输入Special Phones。
   • 在​名称​中输入special。
   • 选择​移动设备组模板。
   • 单击​创建。

3. 在CRXDE中，添加一个​static.css​文件，其中包含/etc/mobile/groups/special节点下设备组的样式。

4. 打开​特殊电话​页面。

5. 要配置设备组，请单击​Settings​旁边的​Edit​按钮。

   在​General​选项卡上：

   • 标题:移动设备组的名称。
   • 描述:群组的描述。
   • 用户代理:与设备匹配的用户代理字符串。它是可选的，可以是正则表达式。 示例: BlackBerryZ10
   • 功能:定义组是否可以处理图像、CSS、JavaScript或设备旋转。
   • 最小屏幕宽度​和高度
   • 禁用模拟器:可在内容编辑期间启用/禁用模拟器。

   在​模拟器​选项卡上：

   • 模拟器:选择分配给此设备组的模拟器。

   在​Filters​选项卡上：

   • 要添加过滤器，请单击添加项目，然后从下拉列表中选择一个过滤器。
   • 将按过滤器的显示顺序进行评估。 当设备不符合过滤器的条件时，将不会评估列表中的后续过滤器。

6. 单击确定。

移动设备组配置对话框如下所示：

每个设备组的自定义CSS

如前所述，可以将自定义CSS与设备组页面相关联，这与设计页面的CSS非常相似。此CSS用于影响页面内容在创作和发布时的设备组特定呈现。随后，将自动包含此CSS:

• 在此设备组使用的每个模拟器的创作实例页面上。
• 在发布实例的页面中，如果请求的用户代理与此特定设备组中的移动设备匹配，则为。

服务器端设备检测

使用过滤器和设备规范库来确定执行HTTP请求的设备的功能。

开发设备组筛选器

创建设备组筛选器以定义一组设备功能要求。 根据需要创建任意数量的过滤器，以定位所需的设备功能组。

设计过滤器，以便您能够使用它们的组合来定义功能组。 通常，不同设备组的功能会重叠。 因此，您可以将一些过滤器与多个设备组定义结合使用。

创建过滤器后，可以在组配置中使用该过滤器。

有关信息，请转到创建设备组过滤器。

使用WURFL™数据库

AEM使用截断版的WURFL™数据库，根据设备的用户代理查询设备功能，如屏幕分辨率或javascript支持。

WURFL™数据库的XML代码通过解析wurfl.xml文件（位于/libs/wcm/mobile/devicespecs/wurfl.xml.）处，以/var/mobile/devicespecs下的节点表示。在首次启动cq-mobile-core包时，对节点进行扩展。

设备功能将存储为节点属性，节点表示设备型号。 您可以使用查询检索设备或用户代理的功能。

随着WURFL™数据库的不断发展，您可能需要对其进行定制或替换。 要更新移动设备数据库，您可以使用以下选项：

• 如果您拥有允许此用途的许可证，请将文件替换为最新版本。 请参阅安装其他WURFL数据库。
• 使用AEM中提供的版本，并配置与用户代理字符串匹配并指向现有WURFL™设备的正则表达式。 请参阅添加基于regexp的用户代理匹配。

测试用户代理到WURFL™功能的映射

当设备访问您的移动设备网站时， AEM会检测到设备，根据其功能将其映射到设备组，并发送与设备组对应的页面查看。 匹配设备组提供必要的样式信息。 可以在移动设备用户代理测试页面上测试这些映射：

http://localhost:4502/etc/mobile/useragent-test.html

安装不同的WURFL™数据库

随AEM一起安装的截断的WURFL™数据库是预先更新的版本
2011年8月30日。 如果您的WURFL版本是在2011年8月30日之后发布的，请确保您的使用符合您的许可证。

安装WURFL™数据库：

1. 在CRXDE Lite中，创建以下文件夹：/apps/wcm/mobile/devicespecs
2. 将WURFL™文件复制到文件夹中。
3. 将文件重命名为wurfl.xml。

AEM会自动解析wurfl.xml文件并更新/var/mobile/devicespecs下的节点。

添加基于regexp的用户代理匹配

在/apps/wcm/mobile/devicesecps/wurfl/regexp下添加用户代理作为正则表达式，以指向现有WURFL™设备类型。

1. 在​CRXDE Lite​中，在/apps/wcm/mobile/devicespecs/regexp下创建一个节点，如apple_ipad_ver1。

2. 将以下属性添加到节点：

   • regexp:定义用户代理的正则表达式，例如：.*Mozilla。*iPad。*AppleWebKit。*Safari。*
   • deviceId:wurfl.xml中定义的设备ID，例如：apple_ipad_ver1

上述配置使User-Agent与提供的正则表达式匹配的设备（如果存在）被映射到apple_ipad_ver1 WURFL™设备ID。

客户端设备检测

本节介绍如何使用AEM的设备客户端检测来优化页面渲染或为客户端提供替代网站版本。

AEM支持基于BrowserMap的设备客户端检测。 BrowserMap 将作为客户端库发运到 /etc/clientlibs/browsermap下。

BrowserMap 为您提供了三种策略，您可以使用这些策略向客户提供替代网站，这些策略按以下顺序使用：

1. 备用链接

2. 特定于设备组的URL

3. 基于选择器的URL

提供备用链接

PageVariantsProvider OSGi服务能够为属于同一系列的站点生成备用链接。 为了配置服务要考虑的站点，必须从站点的根向jcr:content节点添加cq:siteVariant节点。

cq:siteVariant节点需要具有以下属性：

• cq:childNodesMapTo — 确定子节点将映射到的链接元素的属性；建议以这种方式组织网站内容，以便根节点的子节点代表全局网站语言变体的根(例如， /content/mysite/en、 /content/mysite/de)，在此情况下，的 cq:childNodesMapTo 值应 hreflang为；

• cq:variantDomain — 指示将 Externalizer 用于生成页面变体绝对URL的域；如果未设置此值，则将使用相对链接生成页面变体；

• cq:variantFamily — 指示此网站属于哪个网站系列；同一网站的多个特定设备表示应属于同一家族；

• media — 存储链接元素的媒体属性值；建议使用已注册的名称，以便 BrowserMap 库可 DeviceGroups以自动将客 BrowserMap 户端转发到网站的正确变体。

PageVariantsProvider和Externalizer

当cq:siteVariant节点的cq:variantDomain属性值不为空时，PageVariantsProvider服务将生成将此值用作Externalizer服务配置域的绝对链接。 确保配置Externalizer服务以反映您的设置。

定义设备组特定URL

如果您不想使用备用链接，则可以为每个DeviceGroup配置全局URL。 我们建议创建您自己的客户端库，该库嵌入browsermap.standard客户端库，但会重新定义设备组。

BrowserMap的设计方式是，通过从自定义客户端库中创建同名的新设备组并将其添加到BrowserMap对象，可以覆盖设备组定义。

定义基于选择器的URL

如果之前未使用任何机制来指示BrowserMap的替代站点，则将使用DeviceGroups名称的选择器将添加到URL中，在这种情况下，您应提供自己的Servlet来处理请求。

例如，由BrowserMap浏览www.example.com/index.html且标识为smartphone的设备会被转发到www.example.com/index.smartphone.html.

在页面上使用BrowserMap

要在页面中使用标准的BrowserMap客户端库，您必须在页面的head部分中使用cq:include标记包含/libs/wcm/core/browsermap/browsermap.jsp文件。

<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />

除了在JSP文件中添加BrowserMap客户端库之外，还必须将设置为client-side的cq:deviceIdentificationMode字符串属性添加到网站根目录下的jcr:content节点。

覆盖BrowserMap的默认行为

如果要通过覆盖DeviceGroups或添加更多探测器来自定义BrowserMap — 则应创建您自己的客户端库，在该库中嵌入browsermap.standard客户端库。

此外，您还必须在JavaScript代码中手动调用BrowserMap.forwardRequest()方法。

创建自定义BrowserMap客户端库后，我们建议采用以下方法：

1. 在应用程序中创建browsermap.jsp文件

   <%@include file="/libs/foundation/global.jsp" %>
   <%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
   <%@ page import="
       com.day.cq.wcm.api.variants.PageVariant,
       com.day.cq.wcm.api.variants.PageVariantsProvider,
       com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode,
       com.day.cq.wcm.api.WCMMode"
   %>
   <%
       final PageVariantsProvider p = sling.getService(PageVariantsProvider.class);
       if(p == null) {
           throw new IllegalStateException("Missing PageVariantsProvider service");
       }
       for(PageVariant v : p.getVariants(currentPage, slingRequest)) {
           final String curVar = v.getAttributes().get("data-current-variant");
           String media = v.getAttributes().get("media");
           if (media != null) {
               media = media.replaceAll(" ", "");
           }
   %>
       <link
           rel="alternate"
           data-cq-role="site.variant"
           title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>"
           hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>"
           media="<%= xssAPI.encodeForHTMLAttr(media) %>"
           href="<%= xssAPI.getValidHref(v.getURL()) %>"
           <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %>
       />
   <%
       }
       Boolean browserMapEnabled = true;
       final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class);
       String[] selectors  = slingRequest.getRequestPathInfo().getSelectors();
       boolean isPortletRequest = false;
       for (int i = 0; i < selectors.length; i++) {
           if ("portlet".equals(selectors[i])) {
               isPortletRequest = true;
               break;
           }
       }
       if (isPortletRequest) {
           log.debug("Request was made by a portlet container - BrowserMap will not be embedded");
       } else {
           final WCMMode wcmMode = WCMMode.fromRequest(slingRequest);
           boolean shouldIncludeClientLib = false;
           if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) {
               if (dim != null) {
                   final String mode = dim.getDeviceIdentificationModeForPage(currentPage);
                   shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode);
                   if (shouldIncludeClientLib) {
                       browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled");
                       if (browserMapEnabled == null) {
                           browserMapEnabled = true;
                       }
                   }
               }
           }
   %>
           <c:if test="<%= !browserMapEnabled %>">
               <meta name="browsermap.enabled" content="false">
           </c:if>
           <c:if test="<%= shouldIncludeClientLib %>">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <cq:includeClientLib categories="browsermap.custom"/>
           </c:if>
   <%
       }
   %>
   

2. 将broswermap.jsp文件包含在头部分中。

   <cq:include script="browsermap.jsp" />
   

从某些页面中排除BrowserMap

如果要从某些您不需要客户端检测的页面中排除BrowserMap库，可以添加请求属性：

<%
request.setAttribute("browsermap.enabled", false);
%>

这将使/libs/wcm/core/browsermap/browsermap.jsp脚本向页面中添加元标记，以使BrowserMap不执行任何检测：

<meta name="browsermap.enabled" content="false">

测试网站的特定版本

通常，BrowserMap脚本会始终将访客重定向到最合适的网站版本，通常会根据需要将访客重定向到桌面或移动设备网站。

您可以通过向URL添加device参数来强制任何请求的设备以测试网站的特定版本。 以下URL将呈现Geometrixx Outdoors网站的移动版本。

http://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone

覆盖的设备值存储在Cookie中，因此您无需向每个URL添加device参数即可浏览您的网站。

因此，您需要调用将device设置为browser的相同URL，才能返回到网站的桌面版。

移动设备请求处理

AEM处理由属于触控设备组的移动设备发出的请求，如下所示：

1. iPad向AEM发布实例发送请求，例如http://localhost:4503/content/geometrixx_mobile/en/products.html

2. AEM确定所请求页面的站点是否为移动站点（通过检查第一级页面/content/geometrixx_mobile是否扩展了移动页面组件）。 如果是：

3. AEM会根据请求标头中的用户代理来查找设备功能。

4. AEM将设备功能映射到设备组，并将touch设置为设备组选择器。

5. AEM将请求重定向到http://localhost:4503/content/geometrixx_mobile/en/products.touch.html.

6. AEM将响应发送到iPad:

   • products.touch.html 是按常规方式呈现的，平易近人。
   • 渲染组件使用选择器来调整演示文稿。
   • AEM会自动将移动设备选择器添加到页面中的所有内部链接。

统计数据

您可以获取有关移动设备向AEM服务器发出的请求数的一些统计信息。 可以划分请求数：

• 每个设备组和设备
• 每年、月和日

要查看统计信息，请执行以下操作：

1. 转到​工具​控制台。

2. 打开​Device Statistics​页面下方的​Tools > Mobile。

3. 单击链接可查看特定年份、月份或日期的统计资料。

Statistics​页面如下所示：

如果需要在统计信息中生成条目，可以按如下方式继续操作：

1. 使用移动设备或模拟器(例如，在Firefox上的https://chrispederick.com/work/user-agent-switcher/)。

2. 通过禁用创作模式(例如：

   http://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled

Statistics​页面现已可用。

支持“发送链接到朋友”链接的页面缓存

移动设备页面通常可在Dispatcher上访问，因为设备组选择器会在页面URL中区分为设备组呈现的页面，例如/content/mobilepage.touch.html。 不会缓存对没有选择器的移动页面的请求，就像在本例中，设备检测操作并最终重定向到匹配的设备组（或“不匹配”）一样。 链接重写器会处理通过设备组选择器呈现的移动页面，该重写器会重写页面中的所有链接，以同时包含设备组选择器，从而阻止对已限定页面上的每次点击执行设备检测。

因此，您可能会遇到以下情况：

用户Alice将被重定向到coolpage.feature.html，并将该URL发送给朋友Bob，Bob使用属于touch设备组的其他客户端访问该URL。

如果从前端缓存中提供coolpage.feature.html，则AEM将无法分析请求，以发现移动选择器与新的用户代理不匹配，并且Bob获得错误的表示形式。

要解决此问题，您可以在页面上包含一个简单的选择UI，最终用户可以在该UI中覆盖由AEM选择的设备组。 在上例中，页面上的链接（或图标）允许最终用户在认为设备足以满足此要求时切换到coolpage.touch.html。