为浏览页面创建横幅和动态横幅

横幅是显示在集合浏览页面中的项目。有两种横幅:

基本横幅 – 基本横幅是显示在浏览页面中的图像。点击横幅可能没有任何后果,也可能触发操作。例如,点击横幅可以启动网页、链接到另一篇文章或集合或发送电子邮件、简讯或者电话呼叫。横幅还对在浏览页面中显示品牌或提供视觉分隔条有用。

动态横幅 – 动态横幅将在浏览页面上显示 HTML 内容。例如,动态横幅可显示股票报价、幻灯片放映轮播或社交媒体源。通过利用 Cordova 插件,您可利用 AEM Mobile 特定功能(如允许用户点击横幅中的幻灯片以导航到文章或显示授权登录提示)。

基本横幅

此横幅的外观由分配到的卡决定。横幅图像将根据需要进行居中对齐、缩放和裁剪以填充其映射到的卡区域。请创建足够大、能在卡中正确显示的横幅图像。请参阅优化适用于 AEM Mobile 的内容

  1. 在“内容和布局”中,单击“内容”,然后单击“添加” > “添加横幅”

  2. 指定对项目唯一的横幅名称。

  3. 为横幅指定元数据。

    使用映射规则将内容映射到卡时,您可能希望添加元数据以将横幅与其他内容区分开来。

  4. 指示点击横幅后发生的事件。

    如果用户点击横幅后没有任何效果,则选择“无”。

    如果您希望横幅执行某个操作,请选择以下选项之一:

    http:// - 在用户点击横幅后在应用程序内浏览器中打开指定网页(http: 或 https:)。

    示例:http://www.adobe.com

    navto:// - 跳转到指定的文章或集合。请注意,不支持指向文章中的页码的链接。有关 navto 格式的信息,请参阅 AEM Mobile 文章中的超链接

    示例:navto://collection/coffeeProducts

    mailto: - 使用设备的默认电子邮件应用程序发送电子邮件消息。

    简单示例:mailto:jane@example.com

    详细示例:mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line。

    sms: - 使用设备的消息传递应用程序发送文本消息。

    简单示例:sms:1-206-555-2323

    详细示例 (iOS):sms:+1206-555-2323&body=Text%20message

    详细示例 (Android):sms:+1206555-2323?body=Text%20message

    tel: - 使用设备的手机应用程序进行电话呼叫。

    示例:tel:1-206-555-2323

    导航到主集合 - 返回到顶级集合中的第一篇文章或第一个集合。

    导航返回 - 返回到用户从中通过点击或单击导航到当前浏览页面的前一个浏览器页面或前一篇文章。(移动设备上的轻扫手势未包含在返回导航中。)

    移动设备上仅支持 mailto、sms 和 tel 操作。它们在桌面 Web 查看器中无任何影响。

  5. 使用“图像”选项卡上传横幅图像。

    如果不想将图像用于横幅(例如,如果想要仅显示横幅标题或颜色),您可以上传任何图像文件,然后创建不显示图像的卡。

  6. 将横幅添加到集合。确保在集合中正确放置横幅(如顶部),以便让它显示在浏览页面上的适当位置。

  7. 如有必要,编辑布局模板以包含显示横幅的卡。

    例如,您可以创建包含设备宽度的卡,并可以创建将卡映射到任何横幅的规则。请参阅创建卡和布局

动态横幅

动态横幅显示浏览页面中的 HTML 内容。

  • 如果在浏览页面上使用多个动态横幅,则应在目标设备上测试体验以确保性能可靠。如果浏览页面加载时间过长,或者如果您遇到其他问题,请考虑减少浏览页面上使用的动态横幅数量。
  • 在横幅中使用缩略图图像是可选的。图像可能有用(如果用户脱机)或显示在透明 HTML 内容后。
  • 如果在动态横幅中使用 Cordova 插件,应确保选择动态横幅属性中的“启用可扩展性功能”
  • 在您的 HTML 文件中引用外部内容时,建议您使用 HTTPS 协议代替 HTTP。桌面 Web 查看器需要 HTTPS 协议。
  • 您可以使用 <video playsinline autoplay> 元素在动态横幅中自动播放视频。如果视频在横幅显示前自动播放,请考虑使用可在出现 window.onAppear 事件时播放视频并在出现 window.onDisappear 事件时暂停视频的 JavaScript。

 

动态横幅视频

动态横幅视频

示例授权横幅

使用此 HTML 内容创建授权动态横幅。如果用户未登录,则会在横幅中显示登录提示。如果用户已登录,则会在横幅中显示“注销”按钮。创建动态横幅时,请确保选择“启用可扩展性功能”以启用 Cordova 插件。

下载

创建动态横幅

  1. 创建 HTML 内容并生成文章文件。

  2. 在“内容和布局”中,单击“内容”,然后单击“添加” > “添加动态横幅”

  3. 指定对项目唯一的横幅名称。

  4. 为横幅指定元数据。

    使用映射规则将内容映射到卡时,您可能希望添加元数据以将横幅与其他内容区分开来。

    注意:

    如果您的 HTML 内容包含对 Cordova 插件的引用,请确保选择“启用可扩展性功能”

  5. 使用“图像”选项卡上传横幅图像。

    使用横幅图像是可选的。横幅图像在设备脱机时有用,或可作为背景或透明 HTML 内容。

  6. 使用“内容文件”选项卡上传包含您的 HTML 内容的文章文件。

  7. 如果动态横幅为广告,请使用“广告”选项卡指定分析数据信息。

  8. 将横幅添加到集合。确保在集合中正确放置横幅(如顶部),以便让它显示在浏览页面上的适当位置。

  9. 如有必要,编辑布局模板以包含显示横幅的卡。

    例如,您可以创建包含设备宽度的卡,并可以创建将卡映射到任何横幅的规则。请参阅创建卡和布局

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略