使用体验片段

本页涵盖以下主题：

• 概述
• 在 AEM Screens 中使用体验片段
• 将更改传播到页面

概述

体验片段​是由一个或多个组件构成的组件组，包括可在页面内引用的内容和布局。体验片段可以包含任何组件（例如包含一个或多个组件，这些组件又可以包含段落系统内的任何内容），这些组件将被引用到完整体验中或由第三个端点进行请求。

在 AEM Screens 中使用体验片段

例如，以下工作流演示了如何在站点中使用We.Retail中的体验片段。 您可以选择一个网页，并在其中一个项目的AEM Screens渠道中利用该内容。

先决条件

使用渠道创建演示项目

创建项目

1. 单击​创建屏幕项目​以创建新项目。
2. 在“标题”中输入 DemoProject。
3. 单击​保存。

将​DemoProject​添加到您的AEM Screens。

创建渠道

1. 导航到您创建的​DemoProject​文件夹，然后选择​渠道​文件夹。

2. 单击操作栏中的​创建​以打开向导。

3. 从向导中选择​序列渠道​模板，然后单击​下一步。

4. 将​标题​输入为​TestChannel，然后单击​创建。

将​TestChannel​添加到您的​DemoProject​中。

创建体验片段

请按照以下步骤将​We.Retail​中的内容用于​DemoProject​中的​TestChannel。

1. 在We.Retail中导航到站点页面

   1. 导航到站点并选择​We.Retail -> 美国 -> 英语 -> 设备，然后选择此页面以将其用作Screens渠道的体验片段。

   2. 单击操作栏中的​编辑 ，以打开要用作Screens渠道体验片段的页面。

2. 重新使用内容

   1. 选择要包含在渠道中的片段。
   2. 单击右侧的最后一个图标以打开​转换为体验片段​对话框。

   

3. 创建体验片段

   1. 选择​操作​作为​创建新体验片段。

   2. 选择​父路径。

   3. 选择​Template。 在此处选择​体验片段 — 屏幕变量​模板（字段/libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens中的值）。

   4. 将​片段标题​输入为​ScreensFragment。

   5. 单击复选标记以完成新体验片段的创建。

   

   注意：要更轻松地选择选项，请单击字段右侧的复选标记以打开选择对话框。

4. 创建体验片段的Live Copy

   1. 导航到AEM主页。
   2. 选择​体验片段​并突出显示​ScreensFragment，然后单击​变量作为Live-copy，如下图所示：

   

   c.从​创建Live Copy​向导中选择​ScreensFragment，然后单击​下一步。

   d.输入​标题​和​名称​作为​Screens。

   e.单击​创建​以创建Live Copy。

   f.单击​Done​以返回至​ScreensFragment​页面。

   

   注意

   创建Screens片段后，您可以编辑片段的属性。 选择片段，然后单击操作栏中的​属性。

   编辑屏幕片段的属性

   1. 导航到​ScreensFragment（您在上面的步骤中创建），然后单击操作栏中的​属性。

   2. 选择​脱机配置​选项卡，如下图所示。

   您可以将​客户端库（java和css）和​静态文件​添加到您的体验片段中。

   以下示例显示了如何向体验片段中添加作为静态文件一部分的客户端库和字体。

5. 在Screens渠道中将体验片段用作组件

   1. 导航到要在其中使用​Screens​片段的Screens渠道。

   2. 选择​TestChannel，然后单击操作栏中的​编辑。

   3. 单击侧选项卡中的组件图标。

   4. 将​体验片段​拖放到渠道中。

   

   e.选择​体验片段​组件，然后选择左上角的（扳手）图标以打开​体验片段​对话框。

   f.选择您在​路径​的​步骤3​中创建的片段的​Screens Live Copy。

   

   f.选择您在​体验片段​的​步骤3​中创建的片段的​Screens Live Copy。

   

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

   i.从​体验片段​对话框中选择​脱机配置​以定义客户端库和静态文件。

   注意

   如果除了在步骤(4)中配置的文件之外，您还要添加客户端库或静态文件，则可以从​体验片段​对话框的​脱机配置​选项卡中添加。

   

   j.单击复选标记以完成该过程。

验证结果

完成上述步骤后，您可以通过以下方式在​ChannelOne​中验证您的体验片段：

1. 导航到​TestChannel。
2. 从操作栏中选择​Preview。

您将从渠道的​Sites​页面（体验片段的Live-copy）中查看内容，如下图所示：

将更改传播到页面

Live Copy是指由转出配置定义的同步操作维护的（源的）副本。

自体验片段以来，我们创建的是​Sites​页面中的Live Copy，因此，如果您从主控页面对该特定片段进行更改，则将查看渠道中所做的更改或您使用体验片段的目标。

请按照以下步骤将更改从主控渠道传播到目标渠道：

1. 从​Sites(主控)页面中选择体验片段，然后单击铅笔图标以编辑体验片段中的项目。

   

2. 选择体验片段并单击扳手图标以打开用于编辑图像的对话框。

   

3. 将打开​产品网格​对话框。

   

4. 您可以编辑任何图像。 例如，此处的第一个图像在此片段中被替换。

   

5. 选择体验片段，然后单击转出图标以将更改传播到渠道中使用的片段。

   

6. 单击转出以确认更改。

   您将看到已推出更改。

   

验证更改

请按照以下步骤确认渠道中的更改：

1. 导航到​Screens -> 渠道 -> TestChannel。

2. 单击操作栏中的​预览​以确认更改。

下图说明了​TestChannel​中的更改：