文字重疊

本節涵蓋下列主題:

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

如果您已安裝AEM 6.3 Feature Pack 5或AEM 6.4 Feature Pack 3,則​Text Overlay​功能才可用。

概覽

「文字覆蓋」是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,然後從動作列按一下「編輯」以開啟編輯器。

    screen_shot_2018-12-16at80017pm

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

    screen_shot_2018-12-16at80221pm

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

    screen_shot_2018-12-16at80424pm

瞭解文字覆蓋屬性

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

文字

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

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

調整大小和 定位此選項可讓使用者水準或垂直對齊文字,或另外使用精細的工具來對齊文字。

注意

若要正確使用精密的工具,請務必使用(px)做為字尾,例如200px,以像素為單位識別正確的位置。 此運算式的結果是從起點開始200像素。

在文字覆蓋中使用ContextHub值

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

必備條件

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

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

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

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

  2. 選擇​個人化​標籤以設定ContextHub組態。

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

    2. 選擇​區段路徑​作為​conf > 螢幕 > 設定 > wcm>區段​,然後按一下​選擇<a113/>。

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

      注意

      使用ContextHub和區段路徑,您最初在此儲存上下文中心組態和區段。

      影像1

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

    影像1

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

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

    影像1

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

    注意

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

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

    影像1

    注意

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

    影像1

  8. 從「影像」對話方塊返回至「文字覆蓋」標籤,並新增「目前溫度{值}」文字,如下圖所示。

    影像1

  9. 按一下「預覽」,檢視所要的輸出。

    影像1

本頁內容