使用体验片段

本页涵盖以下主题：

• 概述
• 在 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. 选择​模板。 在此处选择​体验片段 — 屏幕变量​模板（字段/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.输入​标题​和​名称​作为​屏幕。

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

   f.单击​完成​可返回至​ScreensFragment​页面。

   

   注意

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

   编辑屏幕片段的属性

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

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

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

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

5. 在“屏幕”渠道中将体验片段用作组件

   1. 导航到要使用​Screens​片段的“屏幕”渠道。

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

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

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

   

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

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

   

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

   

   h.在​持续时间​中输入毫秒。

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

   注意

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

   

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

验证结果

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

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

您将视图渠道中​站点​页面（体验片段的Live-Copy）中的内容，如下图所示：

将更改传播到页面

Live Copy引用（源的）副本，由同步操作维护，如转出配置所定义。

由于体验片段，因此我们创建的是​站点​页面中的Live Copy，因此，如果您从主控页面对该特定片段进行更改，您将视图渠道中的更改或您使用体验片段的目标。

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

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

   

2. 选择体验片段，然后单击扳手图标以打开对话框以编辑图像。

   

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

   

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

   

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

   

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

   您将看到更改被转出。

   

验证更改

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

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

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

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