文本覆盖

本节涵盖以下主题:

  • 概述
  • 使用文本叠加
  • 了解文本叠加属性
  • 在文本叠加中使用ContextHub值
注意

仅当您安装了AEM 6.3功能包5或AEM 6.4功能包3时,文本叠加​功能才可用。

概述

文本叠加是AEM Screens中提供的一项功能,通过提供覆盖在图像顶部的标题或描述,该功能允许您在序列渠道中创建引人入胜的体验。

要了解如何创建您自己的自定义组件,请参阅​扩展AEM Screens组件

此部分仅展示如何在AEM Screens项目中使用和利用海报组件,并将其用作序列渠道中的一个渠道中的文本叠加。

使用文本叠加

以下部分介绍如何在AEM Screens项目中使用文本叠加。

前提条件

在开始实施此功能之前,请确保已将项目设置为开始实施文本叠加的先决条件。 例如,

  • 创建AEM Screens项目(在此示例中,TextOverlayDemo

  • 在​Channels​文件夹下创建名为​TextSample​的序列渠道

  • 向​TextSample​渠道中添加内容

下图显示了​渠道​文件夹中具有​TextSample​渠道的​TextOverlayDemo​项目。

screen_shot_2018-12-16at75908pm

请按照以下步骤在AEM Screens渠道中使用文本叠加:

  1. 导航到​TextOverlayDemo —> 渠道 —> TextSample ,然后单击操作栏中的​编辑​以打开编辑器。

    screen_shot_2018-12-16at80017pm

  2. 选择图像,然后单击​配置(扳手图标)以打开属性对话框。

    screen_shot_2018-12-16at80221pm

  3. 从对话框的导航栏中选择​文本叠加​选项,如下图所示。

    screen_shot_2018-12-16at80424pm

了解文本叠加属性

使用文本叠加属性,您可以向Screens项目中的任何组件添加文本。 以下部分概述了文本叠加中可用的属性:

text

您可以在文本框中添加文本,并添加排版重点,如粗体、斜体、下划线等。

颜色 变体此选项允许文本为“深色”(黑色文本)或“浅色”(白色文本)。

大小调 整和定位此选项允许用户水平或垂直对齐文本,或者额外使用细粒度工具进行文本对齐。

注意

要正确使用细粒度工具,请务必以像素(px)作为后缀来识别正确的位置,例如200px。 此表达式的结果将为距起始点200像素。

在文本叠加中使用ContextHub值

以下部分介绍数据存储中值的用法,例如,文本叠加组件中的google工作表。

前提条件

您必须为AEM Screens项目设置ContextHub配置。

要了解如何使用数据存储来设置和管理数据驱动的资产更改,请参阅在AEM Screens中配置ContextHub

为项目设置所需配置后,请按照以下步骤使用google工作表中的值:

  1. 导航到​TextOverlayDemo —> 渠道 —> TextSample ,然后单击操作栏中的​属性

  2. 选择​Personalization​选项卡以设置ContextHub配置。

    1. 选择​ContextHub路径​作为​libs > 设置 > cloudsettings > 默认 > ContextHub配置​并单击​选择

    2. 选择​区段路径​作为​conf > 屏幕 > 设置 > wcm > 区段​并单击​选择

    3. 单击​保存并关闭

      注意

      使用ContextHub和区段路径,您最初在其中保存了ContextHub配置和区段。

      图像1

  3. 导航到​TextOverlayDemo —> 渠道 —> TextSample ,然后单击操作栏中的​编辑​以打开编辑器。

    图像1

  4. 按照本页使用文本叠加部分中的说明,向图像添加图像和文本叠加组件。

  5. 单击​配置(扳手图标)以打开​图像​对话框。

    图像1

  6. 从​Image​对话框中导航到​ContextHub​选项卡。 单击​添加

    注意

    如果尚未设置ContextHub配置,则将为您的项目禁用此选项。

  7. 在​Placeholder​字段中输入​,在​ContextHub Variable​中选择要从Google工作表中获取值的行(在本例中,该值是从Google工作表的行2和列1中检索),然后输入​默认值​作为​20,如下图所示。 完成后,单击复选标记。

    图像1

    注意

    以下图像显示了从google工作表中检索的值,供您参考:

    图像1

  8. 从“图像”对话框中导航回​文本叠加​选项卡,并添加文本​当前温度{Value},如下图所示。

    图像1

  9. 单击​预览​以查看所需的输出。

    图像1

在此页面上