体验片段组件 (v1)

使用核心组件体验片段组件，内容作者可以在支持本地化网站结构时，在页面上放置体验片段变体。

用途

使用核心组件体验片段组件，内容作者可以从现有体验片段变体中选择并将其放在内容页面上。体验片段组件还支持本地化的网站结构。

• 组件的属性可在“配置”对话框中定义。
• 将组件添加到页面时的组件默认值可以在“设计”对话框中定义。

版本和兼容性

本文档介绍了体验片段组件 v1，此版本随 2019 年 9 月的核心组件发行版本 2.6.0 的发布引入。

本地化网站结构支持

体验片段组件可以适应本地化的网站结构，并根据页面的本地化渲染正确的体验片段。为此，体验片段必须满足以下条件。

• 模板中添加了体验片段组件。
• 该模板用于创建新的内容页面，这些页面是 /content/<site> 以下的本地化结构的一部分。
• 在内容页面上引用的体验片段属于 /content/experience-fragments 以下的本地化体验结构的一部分，遵循与 /content/<site> 以下的网站相同的模式，包括使用相同的组件名称。

在本例中，与当前页面具有相同本地化（语言、Blueprint 或实时副本）的片段将作为模板的一部分渲染。

此行为仅限添加到模板的体验片段组件。添加到单独内容页面的体验片段组件将渲染在页面中配置的准确体验片段再现。

• 有关体验片段组件本地化功能的工作方式示例，请参阅以下部分。
• 有关核心组件的本地化功能如何配合使用的示例，请参阅核心组件页面的本地化功能。

示例

假设您的内容与以下内容类似：

/content
+-- experience-fragments
   \-- wknd
      +-- language-masters
      +-- us
         +-- en
            +-- footerTextXf
            \-- headerTextXf
         \-- es
            +-- footerTextXf
            \-- headerTextXf
      \-- ch
         +-- de
            +-- footerTextXf
            \-- headerTextXf
         +-- fr
            +-- footerTextXf
            \-- headerTextXf
         \-- it
            +-- footerTextXf
            \-- headerTextXf
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   +-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

请注意，/content/experience-fragments/wknd 以下的结构镜像了 /content/wknd 的结构。

在本例中，如果体验片段组件 /content/experience-fragments/wknd/us/en/footerTextXf 放在模板上，则根据该模板创建的本地化页面将自动渲染与本地化内容页面对应的本地化体验片段。

因此，如果您要导航到 /content/wknd/ch/de 下使用同一模板的内容页面，则将渲染 /content/experience-fragments/wknd/ch/de/footerTextXf 而不是 /content/experience-fragments/wknd/us/en/footerTextXf。

回退

体验片段组件将尝试按照以下顺序查找对应的本地化组件。

1. 首先尝试查找语言根。
2. 如果未找到，则尝试查找 Blueprint。
3. 如果未找到，则尝试查找实时副本。
4. 如果未找到，则它会默认为在组件中配置的体验片段。

示例组件输出

要对体验片段组件进行体验并查看其配置选项示例以及 HTML 和 JSON 输出，请访问组件库。

技术详细信息

在 GitHub 上可找到有关体验片段组件的最新技术文档。

在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。

“配置”对话框

利用“配置”对话框，内容作者可以选择应在页面上渲染的体验片段变体。

使用​打开选择对话框​按钮可打开组件选择器，来选择要添加到内容页面中的体验片段组件变体。

如果您将体验片段组件添加到模板，请注意，如果体验片段已本地化，则它会自动本地化，因此根据您明确选择的组件，页面上渲染的内容会变化。有关更多信息，请参阅以上示例。

您还可以定义 ID。利用此选项，可以控制 HTML 和 Data Layer 中的组件的唯一标识符。

• 如果留空，系统会自动为您生成一个唯一 ID，可以通过检查结果页面找到该 ID。
• 如果指定一个 ID，作者有责任确保它是唯一的。
• 更改此 ID 会对 CSS、JS 和数据层跟踪产生影响。

“设计”对话框

使用“设计”对话框，模板作者可以定义哪些选项可供使用体验片段组件的内容作者使用，以及在放置体验片段组件时的默认设置。

“样式”选项卡

体验片段组件支持 AEM 样式系统。