文字重疊 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 sheets 。
必備條件
為您的AEM Screens專案設定ContextHub設定。
若要瞭解如何使用資料存放區來設定和管理資料導向資產變更,請參閱 在AEM Screens中設定ContextHub.
設定專案所需的設定後,請依照下列步驟使用Google工作表中的值:
-
導覽至 TextOverlayDemo —> 頻道 —> 文字範例 並按一下 屬性 動作列中的。
-
選取 個人化 索引標籤以設定ContextHub設定。
-
選取 ContextHub路徑 作為 程式庫 > 設定 > 雲端設定 > 預設 > ContextHub設定 並按一下 選取.
-
選取 區段路徑 作為 conf > 畫面 > 設定 > wcm > 區段 並按一下 選取.
-
按一下 「儲存並關閉」。
note note NOTE 使用ContextHub和區段路徑,您最初儲存您的Context Hub設定和區段。
-
-
導覽至 TextOverlayDemo —> 頻道 —> 文字範例 並按一下 編輯 以開啟編輯器。
-
將影像和文字覆蓋元件新增至您的影像,如所述 使用文字覆蓋 區段。
-
按一下 設定 (扳手圖示)開啟 影像 對話方塊。
-
導覽至 ContextHub 標籤從 影像 對話方塊。 按一下 新增.
note note NOTE 如果您尚未設定ContextHub設定,專案的此選項會停用。 -
輸入 值 在 預留位置 欄位。 選取您要從Google工作表取得值的資料列 contexthub變數. 在此情況下,值會從Google工作表中從列2和欄1擷取。 現在輸入 預設值 作為 20,如下圖所示。 完成後,按一下核取記號。
note note NOTE 下列影像會示範從Google工作表擷取的值,以供您參考: -
導覽回至 文字覆蓋 標籤並新增文字 目前溫度{Value},如下圖所示。
-
按一下 預覽 以檢視所需的輸出。