使用體驗片段

本頁涵蓋下列主題:

  • 概覽
  • 在AEM畫面中使用體驗片段
  • 將更改傳播到頁面

概覽

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

在AEM畫面中使用體驗片段

注意

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

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

先決條件

使用渠道建立示範專案

建立專案

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

DemoProject 將會新增 至您的AEM畫面。

建立渠道

  1. 導覽至您建 立的DemoProject ,然後選取「 Channels 」檔案夾。

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

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

  4. 將標題輸 入為 TestChannel ,然後按一 下Create

的DemoProject將會新增 TestChannel
screen_shot_2019-07-29at105101am

建立體驗片段

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

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

    1. 導覽至「網站」並選取「 We.Retail In-Store -> Channels ->Idle Channel - Night 」,然後選取此頁面,將其當做您的「畫面」頻道的體驗片段。

    2. 從動 作列按一下 「編輯」,以開啟您要用作「畫面」頻道體驗片段的頁面。

  2. 重新使用內容

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

    screen_shot_2019-07-29at105314am

  3. 建立體驗片段

    1. 選擇「 動作為「建立新體驗片段」

    2. 選擇父 路徑

    3. 選擇 範本。 在這裡選 擇「體驗片段——螢幕變化 」範本。

    4. 將「片段 標題」輸入畫面片段」

    5. 按一下核取標籤,完成新體驗片段的建立。

    screen_shot_2019-07-29at105918am

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

    1. 導覽至AEM首頁。
    2. 選取 Experience Fragments ,然後反白標示 ScreensFragment ,然後按一下「 變數」作為即時副本,如下圖所示:

    screen_shot_2019-07-29at110443am

    c.從「建立 即時副本 」精靈 選取「畫面片段 」,然後按一下「 下一步」。

    d.輸入「標 」和「 名稱 」為「 畫面」。

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

    f.按一 下「完成 」以返回 ScreensFragment 頁面。

    screen_shot_2019-07-29at110616am

    注意

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

    編輯畫面片段的屬性

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

    2. 選擇「 離線配置 」頁籤,如下圖所示。

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

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

  5. 在畫面頻道中使用體驗片段做為元件

    1. 導覽至您要使用「畫面」片段的「畫 」頻道。

    2. 選取 TestChannel ,然後從動作 列按一下 「編輯」。

    3. 按一下側面頁籤中的元件表徵圖。

    4. 將體驗片段 拖放至您 的頻道。

    screen_shot_2019-07-29at123115pm

    e.選取 Experience Fragment (體驗片段)元件,並選取左上角(扳手)圖示以開啟「 體驗片段 」對話方塊。

    f.選取您 在Path中 Step 3中建立之片段的「畫面 即時 副本

    screen_shot_2019-07-26at82650pm

    f.選取您 Experience Fragment中於步驟3中建立之片段的「畫面 」即時 副本

    screen_shot_2019-07-26at82509pm

    h.在「持續時間」中輸 入毫秒

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

    注意

    如果除了在步驟(4)中配置的檔案外,還要添加客戶端庫或靜態檔案,可以從「 Experience Fragment 」(體驗片段)對話框的「離線配置 」(Offline Config )頁籤添加。

    screen_shot_2019-07-26at82844pm

    j.按一下核取標籤以完成程式。

驗證結果

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

  1. 導覽至 TestChannel
  2. 從操作 欄中選 擇「預覽」。

您會從您的頻道中 「網站」頁面(體驗片段的即時副本)檢視內容,如下圖所示:
screen_shot_2018-06-08at120739pm

將更改傳播到頁面

即時副本 是指由同步動作(如轉出組態所定義)維護的復本(來源)。

由於「體驗片段」是從「 Sites 」頁面建立的即時副本,因此,如果您從主版頁面變更該特定片段,您將檢視您的頻道或使用「體驗片段」的目的地的變更。

注意

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

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

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

    screen_shot_2018-06-08at122655pm

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

    screen_shot_2018-06-08at25031pm

  3. 「產 品格線 」(Product Grid)對話框開啟。

    screen_shot_2018-06-08at25306pm

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

    screen_shot_2018-06-08at25608pm

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

    screen_shot_2018-06-08at31352pm

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

    您會看到變更已推出。

    screen_shot_2018-06-08at32148pm

驗證更改

請依照下列步驟確認您的渠道變更:

  1. 導覽至「 畫面 」->「頻 」-> 「測試頻道」。

  2. 從動 作列按一下 「預覽」,以確認變更。

下圖說明您的 TestChannel變更:
screen_shot_2018-06-08at3351pm

本頁內容