使用體驗片段

本頁涵蓋下列主題:

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

概覽

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

在AEM畫面中使用體驗片段

注意

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

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

先決條件

使用渠道建立示範專案

建立專案

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

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

建立渠道

  1. 導覽至您建立的​DemoProject,並選取「頻道」資料夾。

  2. 按一下操作欄中的​建立​以開啟嚮導。

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

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

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

建立體驗片段

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

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

    1. 導覽至「網站」並選取​We.Retail In-Store -> Channels ->閒置頻道- Night,並選取此頁面做為您的「螢幕」頻道的體驗片段。

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

  2. 重新使用內容

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

    screen_shot_2019-07-29at105314am

  3. 建立體驗片段

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

    2. 選擇​父路徑

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

    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.按一下「完成」,返回至「畫面片段」頁面。

    screen_shot_2019-07-29at110616am

    注意

    建立「畫面」片段後,您就可以編輯片段的屬性。 選擇該片段,然後從操作欄中按一下​屬性

    編輯畫面片段的屬性

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

    2. 選擇​Offline Config​標籤,如下圖所示。

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

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

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

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

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

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

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

    screen_shot_2019-07-29at123115pm

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

    f.選擇在​Path​的​步驟3​中建立的片段的​螢幕​即時副本。

    screen_shot_2019-07-26at82650pm

    f.在​體驗片段​的​步驟3​中,選取您在<a2/>步驟3<a3/>中建立之片段的​畫面​即時副本。

    screen_shot_2019-07-26at82509pm

    h.在​持續時間​中輸入毫秒。

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

    注意

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

    screen_shot_2019-07-26at82844pm

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

驗證結果

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

  1. 導覽至​TestChannel
  2. 從操作欄中選擇​預覽

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

將更改傳播到頁面

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

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

注意

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

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

  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 -> Channels -> TestChannel

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

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free