使用體驗片段

本頁涵蓋下列主題：

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

概覽

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

在AEM畫面中使用體驗片段

注意

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

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

先決條件

使用渠道建立示範專案

建立專案

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

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

建立渠道

導覽至您建 立的DemoProject ，然後選取「 Channels 」檔案夾。
按一 下動作列 中的「建立」，以開啟精靈。
從嚮導中 選擇「序列渠道 」模板，然後按一下「 下一步」。
將標題輸入為 TestChannel ，然後按一 下Create 。

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

建立體驗片段

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

導覽至We.Retail中的「網站」頁面
1. 導覽至「網站」並選取「 We.Retail In-Store -> Channels ->Idle Channel - Night 」，然後選取此頁面，將其當做您的「畫面」頻道的體驗片段。
2. 從動 作列按一下 「編輯」，以開啟您要用作「畫面」頻道體驗片段的頁面。
重新使用內容
1. 選取您要加入渠道的片段。
2. 按一下右側的最後一個圖示，開啟「轉 換為體驗片段 」對話方塊。
建立體驗片段
1. 選擇「動作」 為「建立新體驗片段」。
2. 選擇父路徑。
3. 選擇範本。在這裡選 擇「體驗片段——螢幕變化 」範本。
4. 將「片段 標題」輸入 「 畫面片段」。
5. 按一下核取標籤，完成新體驗片段的建立。
建立體驗片段的即時副本
1. 導覽至AEM首頁。
2. 選取 Experience Fragments ，然後反白標示 ScreensFragment ，然後按一下「 變數」作為即時副本，如下圖所示：
c.從「建立 即時副本 」精靈 選取「畫面片段 」，然後按一下「 下一步」。

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

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

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

注意

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

編輯畫面片段的屬性
1. 導覽至 ScreensFragment （您在前述步驟中建立），然後從動作列按 一下「屬性 」。
2. 選擇「 離線配置 」頁籤，如下圖所示。
您可以將用戶 端程式庫 （java和css）和靜態檔案新增至體驗片段。

下列範例顯示在體驗片段中加入用戶端程式庫和靜態檔案中的字型。
在畫面頻道中使用體驗片段做為元件
1. 導覽至您要使用「畫面」片段的「畫面」頻道。
2. 選取 TestChannel ，然後從動作 列按一下 「編輯」。
3. 按一下側面頁籤中的元件表徵圖。
4. 將體驗片段 拖放至您 的頻道。
e.選取 Experience Fragment （體驗片段）元件，並選取左上角（扳手）圖示以開啟「 體驗片段 」對話方塊。

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

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

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

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

注意

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

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