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