文字重疊 text-overlay

本節涵蓋下列主題:

  • 概觀
  • 使用文字覆蓋
  • 瞭解文字覆蓋屬性
  • 在文字覆蓋中使用ContextHub值
CAUTION
文字覆蓋 ​功能僅在您已安裝AEM 6.3 Feature Pack 5或AEM 6.4 Feature Pack 3時才可用。

概觀 overview

「文字覆蓋」是AEM Screens提供的功能。 它讓您透過在影像上方提供標題或說明,在順序頻道中建立引人入勝的體驗。

若要瞭解如何建立您自己的自訂元件,請參閱​ 延伸AEM Screens元件

本節僅說明如何在AEM Screens專案中使用和套用海報元件。 它也會示範在其中一個序列色版中作為文字覆蓋圖使用。

使用文字覆蓋 using-text-overlay

下節將說明如何在AEM Screens專案中使用文字覆蓋。

必備條件

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

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

  • 在​ 管道 ​資料夾下建立標題為​ TextSample ​的順序管道

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

下圖顯示在​ Channels ​資料夾中具有​ 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

瞭解文字覆蓋屬性 understanding-text-overlay-properties

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

文字

您可以將文字新增至文字方塊,並新增印刷強調文字,例如粗體、斜體和底線。

顏色變體 ​此選項允許文字為深色(黑色文字)或淺色(白色文字)。

大小調整與定位 ​此選項可讓使用者水平或垂直對齊文字,或是使用微調工具對齊文字。

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

在文字覆蓋中使用ContextHub值 using-text-overlay-context-hub

下節說明資料存放區中值的用法,例如,文字覆蓋元件中的google sheets 。

必備條件

為您的AEM Screens專案設定ContextHub設定。

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

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

  1. 導覽至​ TextOverlayDemo > 頻道 > TextSample,然後按一下動作列中的​ 內容

  2. 按一下​ Personalization ​標籤,以便您可以設定ContextHub設定。

    1. 按一下​ ContextHub路徑 ​做為​ libs > 設定 > cloudsettings > 預設 > ContextHub設定,然後按一下​ 選取

    2. 按一下​ 區段路徑 ​做為​ conf > 熒幕 > 設定 > wcm > 區段,然後按一下​ 選取

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

      note note
      NOTE
      使用ContextHub和區段路徑,您最初會在此儲存您的ContextHub設定和區段。

      影像1

  3. 導覽至​ TextOverlayDemo > 頻道 > TextSample,然後按一下動作列中的​ 編輯

    影像1

  4. 依照此頁面的使用文字覆蓋區段所述,將影像和文字覆蓋元件新增至您的影像。

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

    影像1

  6. 從​ 影像 ​對話方塊瀏覽至​ ContextHub ​索引標籤。 按一下​ 新增

    note note
    NOTE
    如果您尚未設定ContextHub組態,則會停用專案的此選項。
  7. 在​ 預留位置 ​欄位中輸入​ 。 在​ ContextHub變數 ​中,按一下您要從Google工作表取得值的列。 在此情況下,值會從Google工作表中擷取自列2和欄1。 現在,輸入​ 預設值 ​為​ 20,如下圖所示。 完成後,按一下核取記號。

    影像1

    note note
    NOTE
    以下影像示範從Google工作表擷取的值,以供您參考:

    影像1

  8. 從[影像]對話方塊瀏覽回​ 文字覆蓋 ​索引標籤,並新增文字​ 目前溫度{Value},如下圖所示。

    影像1

  9. 按一下​ 預覽

    影像1

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053