文字重疊

本節涵蓋下列主題:

  • 概覽
  • 使用文字覆蓋
  • 了解文字覆蓋屬性
  • 在文字覆蓋中使用ContextHub值
注意

文字覆蓋​功能僅在您已安裝AEM 6.3 Feature Pack 5或AEM 6.4 Feature Pack 3時可用。

概覽

文字覆蓋是AEM Screens提供的功能,可讓您提供覆蓋在影像上方的標題或說明,以在序列管道中建立引人入勝的體驗。

若要了解如何建立自訂元件,請參閱​擴充AEM Screens元件

本節只會展示如何在AEM Screens專案中使用和運用海報元件,並在其中一個序列管道中作為文字覆蓋使用。

使用文字覆蓋

下節說明在AEM Screens專案中使用文字覆蓋的方式。

必備條件

開始實作此功能之前,請務必先將專案設定為開始實作文字覆蓋的先決條件。 例如,

  • 建立AEM Screens專案(在此範例中, TextOverlayDemo

  • 在​Channels​資料夾下,建立標題為​TextSample​的序列通道

  • 將內容新增至您的​TextSample​頻道

下圖顯示​Channels​資料夾中​TextSample​通道的​TextOverlayDemo​專案。

screen_shot_2018-12-16at75908pm

請依照下列步驟,在AEM Screens管道中使用文字覆蓋:

  1. 導覽至​TextOverlayDemo —> Channels —> TextSample ,然後按一下動作列中的​Edit​以開啟編輯器。

    screen_shot_2018-12-16at80017pm

  2. 選取影像,然後按一下「設定(扳手圖示)」以開啟「屬性」對話方塊。

    screen_shot_2018-12-16at80221pm

  3. 從對話框的導航欄中選擇​文本覆蓋​選項,如下圖所示。

    screen_shot_2018-12-16at80424pm

了解文字覆蓋屬性

使用「文字覆蓋」屬性,您可以將文字新增至Screens專案中的任何元件。 下節提供文字覆蓋中可用屬性的概觀:

文字

您可以在文字方塊中新增文字,並新增文字強調,例如粗體、斜體、底線等。

色變體此選項允許文本為「深色」(黑色文本)或「淺色」(白色文本)。

大小調 整和定位此選項允許用戶水準或垂直對齊文本,或者使用微調工具對齊文本。

注意

若要正確使用微調工具,請務必以(px)作為尾碼(例如200px)來識別正確的像素位置。 此運算式的結果將是從起始點開始200像素。

在文字覆蓋中使用ContextHub值

以下章節說明資料存放區中值的使用方式,例如文字覆蓋元件中的google工作表。

必備條件

您必須為AEM Screens專案設定ContextHub設定。

若要了解如何使用資料存放區來設定及管理資料導向的資產變更,請參閱在AEM Screens中設定ContextHub🔗

設定專案所需的設定後,請依照下列步驟使用google工作表中的值:

  1. 導覽至​TextOverlayDemo —> Channels —> TextSample ,然後從動作列按一下​Properties

  2. 選取​Personalization​標籤以設定ContextHub設定。

    1. 選擇​ContextHub路徑​作為​libs> settings> cloudsettings > default > ContextHub配置,然後按一下​選擇

    2. 選擇​段路徑​作為​conf> screens> settings > wcm > ,然後按一下​選擇

    3. 按一下​「儲存並關閉」

      注意

      使用ContextHub和區段路徑,您最初會在此儲存內容中樞設定和區段。

      image1

  3. 導覽至​TextOverlayDemo —> Channels —> TextSample ,然後按一下動作列中的​Edit​以開啟編輯器。

    image1

  4. 如本頁的使用文字覆蓋區段所述,新增影像和文字覆蓋元件至您的影像。

  5. 按一下「設定(扳手圖示)」以開啟「影像」對話方塊。

    image1

  6. 從​Image​對話方塊導覽至​ContextHub​標籤。 按一下​「新增」

    注意

    如果您尚未設定ContextHub設定,則專案將會停用此選項。

  7. 在​預留位置​欄位中輸入​,在​ContextHub變數​中選擇要從google工作表中獲取值的行(在此例中,該值是從google工作表的行2和列1中檢索),然後輸入​預設值​作為​20,如下圖所示。 完成後,按一下複選標籤。

    image1

    注意

    下列影像會展示從google工作表擷取的值,以供您參考:

    image1

  8. 從「影像」對話方塊導覽回「文字覆蓋」標籤,然後新增文字「目前溫度{Value}」,如下圖所示。

    image1

  9. 按一下​預覽​以檢視所需的輸出。

    image1

本頁內容