文字重疊 text-overlay
本節涵蓋下列主題:
- 概觀
- 使用文字覆蓋
- 瞭解文字覆蓋屬性
- 在文字覆蓋中使用ContextHub值
概觀 overview
「文字覆蓋」是AEM Screens提供的功能。 它讓您透過在影像上方提供標題或說明,在順序頻道中建立引人入勝的體驗。
若要瞭解如何建立您自己的自訂元件,請參閱 延伸AEM Screens元件。
本節僅說明如何在AEM Screens專案中使用和套用海報元件。 它也會示範在其中一個序列色版中作為文字覆蓋圖使用。
使用文字覆蓋 using-text-overlay
下節將說明如何在AEM Screens專案中使用文字覆蓋。
必備條件
在實作此功能之前,請確定您已設定專案作為開始實作文字覆蓋的先決條件。 例如,
-
建立AEM Screens專案(在此範例中為 TextOverlayDemo)
-
在 管道 資料夾下建立標題為 TextSample 的順序管道
-
新增內容至您的 TextSample 頻道
下圖顯示在 Channels 資料夾中具有 TextSample 頻道的 TextOverlayDemo 專案。
請依照下列步驟,在AEM Screens頻道中使用文字覆蓋:
-
導覽至 TextOverlayDemo > 頻道 > TextSample,然後按一下動作列中的 編輯。
-
按一下影像,然後按一下 設定 (扳手圖示)以開啟內容對話方塊。
-
從對話方塊的導覽列按一下 文字覆蓋 選項,如下圖所示。
瞭解文字覆蓋屬性 understanding-text-overlay-properties
您可以使用「文字覆蓋」屬性,將文字新增至Screens專案中的任何元件。 下節會提供文字覆蓋中可用屬性的概觀:
您可以將文字新增至文字方塊,並新增印刷強調文字,例如粗體、斜體和底線。
顏色變體 此選項允許文字為深色(黑色文字)或淺色(白色文字)。
大小調整與定位 此選項可讓使用者水平或垂直對齊文字,或是使用微調工具對齊文字。
在文字覆蓋中使用ContextHub值 using-text-overlay-context-hub
下節說明資料存放區中值的用法,例如,文字覆蓋元件中的google sheets 。
必備條件
為您的AEM Screens專案設定ContextHub設定。
若要瞭解如何使用資料存放區來設定及管理資料導向資產變更,請參閱在AEM Screens中設定ContextHub。
在您設定專案所需的設定後,請依照下列步驟使用Google工作表中的值:
-
導覽至 TextOverlayDemo > 頻道 > TextSample,然後按一下動作列中的 內容。
-
按一下 Personalization 標籤,以便您可以設定ContextHub設定。
-
按一下 ContextHub路徑 做為 libs > 設定 > cloudsettings > 預設 > ContextHub設定,然後按一下 選取。
-
按一下 區段路徑 做為 conf > 熒幕 > 設定 > wcm > 區段,然後按一下 選取。
-
按一下 「儲存並關閉」。
note note NOTE 使用ContextHub和區段路徑,您最初會在此儲存您的ContextHub設定和區段。
-
-
導覽至 TextOverlayDemo > 頻道 > TextSample,然後按一下動作列中的 編輯。
-
依照此頁面的使用文字覆蓋區段所述,將影像和文字覆蓋元件新增至您的影像。
-
按一下 設定 (扳手圖示)以開啟 影像 對話方塊。
-
從 影像 對話方塊瀏覽至 ContextHub 索引標籤。 按一下 新增。
note note NOTE 如果您尚未設定ContextHub組態,則會停用專案的此選項。 -
在 預留位置 欄位中輸入 值。 在 ContextHub變數 中,按一下您要從Google工作表取得值的列。 在此情況下,值會從Google工作表中擷取自列2和欄1。 現在,輸入 預設值 為 20,如下圖所示。 完成後,按一下核取記號。
note note NOTE 以下影像示範從Google工作表擷取的值,以供您參考: -
從[影像]對話方塊瀏覽回 文字覆蓋 索引標籤,並新增文字 目前溫度{Value},如下圖所示。
-
按一下 預覽。