本節涵蓋下列主題:
此 文字覆蓋 功能僅在您已安裝AEM 6.3 Feature Pack 5或AEM 6.4 Feature Pack 3時可用。
文字覆蓋是AEM Screens中提供的功能,可讓您透過在影像上方提供標題或說明,在序列頻道中建立引人入勝的體驗。
若要瞭解如何建立自己的自訂元件,請參閱 延伸AEM Screens元件.
本節僅展示如何在AEM Screens專案中使用和套用海報元件,以及如何將其用作其中一個序列管道中的文字覆蓋。
下節將說明如何在AEM Screens專案中使用文字覆蓋。
必備條件
開始實作此功能之前,請確定您已設定專案作為開始實作文字覆蓋的先決條件。 例如,
建立AEM Screens專案(在此範例中, TextOverlayDemo)
建立標題為的順序頻道 文字範例 在 頻道 資料夾
將內容新增至 文字範例 頻道
下圖顯示 TextOverlayDemo 專案與 文字範例 中的頻道 頻道 資料夾。
請依照下列步驟,在AEM Screens頻道中使用文字覆蓋:
導覽至 TextOverlayDemo —> 頻道 —> 文字範例 並按一下 編輯 以開啟編輯器。
選取影像並按一下 設定 (扳手圖示)以開啟「屬性」對話方塊。
選取 文字覆蓋 選項,如下圖所示。
您可以使用「文字覆蓋」屬性,將文字新增至畫面專案中的任何元件。 下節提供文字覆蓋中可用屬性的概觀:
您可以將文字新增至文字方塊,並新增印刷強調文字,例如粗體、斜體和底線。
顏色變體 此選項允許文字為深色(黑色文字)或淺色(白色文字)。
大小調整與定位 此選項可讓使用者水平或垂直對齊文字,或是使用微調工具對齊文字。
若要正確使用微調工具,請務必以(px)做為尾碼(例如200畫素)來識別正確的畫素位置。 此運算式的結果是從起點算起200畫素。
下節說明資料存放區中值的使用方式,例如,文字覆蓋元件中的google sheets 。
必備條件
為您的AEM Screens專案設定ContextHub設定。
若要瞭解如何使用資料存放區來設定和管理資料導向資產變更,請參閱 在AEM Screens中設定ContextHub.
設定專案所需的設定後,請依照下列步驟使用Google工作表中的值:
導覽至 TextOverlayDemo —> 頻道 —> 文字範例 並按一下 屬性 動作列中的。
選取 個人化 索引標籤以設定ContextHub設定。
選取 ContextHub路徑 作為 程式庫 > 設定 > 雲端設定 > 預設 > ContextHub設定 並按一下 選取.
選取 區段路徑 作為 conf > 畫面 > 設定 > wcm > 區段 並按一下 選取.
按一下「儲存並關閉」。
使用ContextHub和區段路徑,您最初儲存您的Context Hub設定和區段。
導覽至 TextOverlayDemo —> 頻道 —> 文字範例 並按一下 編輯 以開啟編輯器。
將影像和文字覆蓋元件新增至您的影像,如所述 使用文字覆蓋 區段。
按一下 設定 (扳手圖示)開啟 影像 對話方塊。
導覽至 ContextHub 標籤從 影像 對話方塊。 按一下 新增.
如果您尚未設定ContextHub設定,專案的此選項會停用。
輸入 值 在 預留位置 欄位。 選取您要從Google工作表取得值的資料列 contexthub變數. 在此情況下,值會從Google工作表中從列2和欄1擷取。 現在輸入 預設值 作為 20,如下圖所示。 完成後,按一下核取記號。
下列影像會示範從Google工作表擷取的值,以供您參考:
導覽回至 文字覆蓋 標籤並新增文字 目前溫度{Value},如下圖所示。
按一下 預覽 以檢視所需的輸出。