使用體驗片段

本頁面涵蓋下列主題:

  • 概覽
  • 在AEM Screens中使用體驗片段
  • 傳播對頁面的更改

概覽

體驗片段​是一組一或多個元件,包括可在頁面中參照的內容和版面。 體驗片段可包含任何元件,例如一或多個元件,這些元件可包含段落系統內的任何項目,而這些項目將參考至完整體驗,或由第三個端點請求。

在AEM Screens中使用體驗片段

注意

下列範例使用​We.Retail​做為示範專案,從此處將體驗片段從​Sites​頁面運用至AEM Screens專案。

例如,下列工作流程示範如何在Sites中使用We.Retail中的體驗片段。 您可以選擇網頁,並在其中一個專案中利用AEM Screens頻道中的該內容。

先決條件

使用管道建立示範專案

建立專案

  1. 按一下​建立螢幕專案​以建立新專案。
  2. 將標題輸入為​DemoProject
  3. 按一下「儲存」。

會將​DemoProject​新增至您的AEM Screens。

建立管道

  1. 導覽至您建立的​DemoProject,並選取​Channels​資料夾。

  2. 按一下動作列中的​建立​以開啟精靈。

  3. 從嚮導中選擇​序列通道​模板,然後按一下​下一步

  4. 輸入​Title​作為​TestChannel,然後按一下​Create

將將​TestChannel​添加到您的​DemoProject​中。
screen_shot_2019-07-29at105101am

建立體驗片段

請依照下列步驟,將​We.Retail​中的內容運用至​DemoProject​中的​TestChannel

  1. 導覽至We.Retail中的「網站」頁面

    1. 導覽至「網站」,並選取​We.Retail -> 美國 -> 英文 -> 設備,然後選取此頁面作為Screens頻道的體驗片段。

    2. 按一下動作列中的​編輯,開啟您要作為Screens頻道體驗片段使用的頁面。

  2. 重新使用內容

    1. 選取您要納入管道的片段。
    2. 按一下右側的最後一個圖示,開啟​轉換為體驗片段​對話方塊。

    screen_shot_2019-07-29at105314am

  3. 建立體驗片段

    1. 選擇​Action​作為​建立新體驗片段

    2. 選擇​父路徑

    3. 選擇​模板。 在此處選擇​體驗片段 — 螢幕變化​範本(欄位/libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens中的值)。

    4. 將​片段標題​輸入為​ScreensFragment

    5. 按一下核取記號以完成新體驗片段的建立。

    screen_shot_2019-07-29at105918am

    注意:要更輕鬆地選擇選項,請按一下欄位右側的複選標籤以開啟選擇對話框。

  4. 建立體驗片段的即時副本

    1. 導覽至AEM首頁。
    2. 選取​體驗片段​並反白顯示​ScreensFragment,然後按一下「變化為即時副本​」,如下圖所示:

    screen_shot_2019-07-29at110443am

    c.從​建立即時副本​精靈中選擇​ScreensFragment ,然後按一下​下一步

    d.將​Title​和​Name​輸入為​Screens

    e.按一下​建立​以建立即時副本。

    f.按一下​Done​以返回​ScreensFragment​頁面。

    screen_shot_2019-07-29at110616am

    注意

    建立Screens片段後,您就可以編輯片段的屬性。 選取片段,然後從動作列按一下「屬性​**」。**

    編輯畫面片段的屬性

    1. 導覽至​ScreensFragment(您在前述步驟中建立),然後從動作列按一下​屬性

    2. 選擇​離線配置​頁簽,如下圖所示。

    您可以將​用戶端程式庫(java和css)和​靜態檔案​新增至體驗片段。

    下列範例顯示在體驗片段中新增用戶端程式庫和靜態檔案中的字型。 片段

  5. 在Screens頻道中使用體驗片段作為元件

    1. 導覽至您要使用​Screens​片段的Screens頻道。

    2. 選擇​TestChannel,然後從操作欄按一下​Edit

    3. 按一下側邊標籤中的元件圖示。

    4. 將​體驗片段​拖放至通道。

    screen_shot_2019-07-29at123115pm

    e.選取​體驗片段​元件,然後選取左上角(扳手)圖示以開啟​體驗片段​對話方塊。

    f.選取您在​Path​的​Step 3​中建立的片段的​Screens​即時副本。

    screen_shot_2019-07-26at82650pm

    f.選取您在​體驗片段​的​Step 3​中建立之片段的​Screens​即時副本。

    screen_shot_2019-07-26at82509pm

    h.在​Duration​中輸入毫秒。

    我。從​體驗片段​對話方塊選取​離線設定,以定義用戶端程式庫和靜態檔案。

    注意

    如果您除了在步驟(4)中設定外還想要新增用戶端程式庫或靜態檔案,您可以從​體驗片段​對話方塊的​離線設定​標籤新增。

    screen_shot_2019-07-26at82844pm

    j.按一下核取記號以完成程式。

驗證結果

完成上述步驟後,您可以透過下列方式驗證​ChannelOne​中的體驗片段:

  1. 導覽至​TestChannel
  2. 從動作列選取​預覽

您將從管道的​Sites​頁面(體驗片段的即時副本)檢視內容,如下圖所示:
screen_shot_2018-06-08at120739pm

傳播對頁面的更改

Live Copy是指由同步動作維護的復本(來源的),如轉出設定所定義。

自體驗片段以來,我們建立的是來自​Sites​頁面的即時副本,因此,如果您從主版頁面變更該特定片段,您將會檢視通道或您已使用體驗片段的目的地中的變更。

注意

如需Live Copy的詳細資訊,請參閱重複使用內容:多網站管理員和即時副本。

請依照下列步驟,將變更從主管道傳播至您的目的地管道:

  1. 從​Sites(主版)頁面中選取體驗片段,然後按一下鉛筆圖示以編輯體驗片段中的項目。

    screen_shot_2018-06-08at122655pm

  2. 選取體驗片段,然後按一下扳手圖示以開啟對話方塊以編輯影像。

    screen_shot_2018-06-08at25031pm

  3. 產品網格​對話框開啟。

    screen_shot_2018-06-08at25306pm

  4. 您可以編輯任何影像。 例如,此處會取代此片段中的第一個影像。

    screen_shot_2018-06-08at25608pm

  5. 選取體驗片段,然後按一下轉出圖示,將變更傳播至管道中使用的片段。

    screen_shot_2018-06-08at31352pm

  6. 按一下轉出以確認變更。

    您會看到變更已推出。

    screen_shot_2018-06-08at32148pm

驗證變更

請依照下列步驟確認管道中的變更:

  1. 導覽至​Screens -> 頻道 -> TestChannel

  2. 按一下動作列中的​預覽​以確認變更。

下圖說明​TestChannel​中的更改:
screen_shot_2018-06-08at33351pm

本頁內容