文本覆盖

本节涵盖下列主题:

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

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

概述

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

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

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

使用文本叠加

下节介绍在AEM Screens项目中使用文本叠加。

前提条件

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

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

  • 在​渠道​文件夹下创建标题为​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](https://docs.adobe.com/content/help/zh-Hans/experience-manager-screens/user-guide/developing/configuring-context-hub.html)中的[配置ContextHub。

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

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

  2. 选择​个性化​选项卡以设置ContextHub配置。

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

    2. 选择​区段路径​作为​conf > 屏幕 > 设置 > wcm​区段​,然后单击​选择<a113/>。

    3. 单击​保存并关闭

      注意

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

      image1

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

    image1

  4. 如本页的使用文本叠加部分所述,向图像添加图像和文本叠加组件。

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

    image1

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

    注意

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

  7. 在​占位符​字段中输入​,在​ContextHub变量​中选择要从google工作表中获取值的行(在本例中,从google工作表的第2行和第1列检索值),然后输入​默认值​如下图所示:20。 完成后,单击复选标记。

    image1

    注意

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

    image1

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

    image1

  9. 单击​预览​以视图所需输出。

    image1

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free