體驗片段元件

核心元件體驗片段元件允許內容作者在支援本地化站點結構的同時將體驗片段變體放置在頁面上。

使用狀況

核心元件體驗片段元件允許內容作者從現有體驗片段變體中進行選擇，並將其放在內容頁面上。 「體驗片段」元件還支援本地化的站點結構。

版本和相容性

經驗片段元件的當前版本是v2，該版本於2022年2月隨核心元件2.18.0版一起推出，本文檔對此進行了說明。

下表詳細說明了元件的所有受支援版本、AEM元件版本與之相容的版本，以及指向早期版本文檔的連結。

元件版本 AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 - 相容 相容
v1 相容 相容 相容

有關核心元件版本和版本的詳細資訊，請參閱文檔 核心元件版本。

本地化站點結構支援

經驗片段元件適用於局部化的站點結構，並基於頁面的本地化來呈現適當的經驗片段。 為此，經驗片段必須滿足以下條件。

  • 「體驗片段」元件將添加到模板。
  • 該模板用於建立新內容頁面，該頁面是下面本地化結構的一部分 /content/<site>。
  • 內容頁面上引用的體驗片段是下面本地化體驗片段結構的一部分 /content/experience-fragments 遵循與下面的站點相同的模式 /content/<site> 包括使用相同的元件名稱。

在這種情況下，與當前頁面具有相同本地化（語言、藍圖或即時副本）的片段將作為模板的一部分呈現。

此行為僅限於添加到模板的「體驗片段元件」。 添加到單個內容頁面的體驗片段元件將呈現元件中配置的確切體驗片段呈現形式。

範例

假設您的內容類似以下內容：

/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. 如果找不到，它會嘗試找到一個藍圖。
  3. 如果找不到，它會嘗試查找即時副本。
  4. 如果找不到，則預設為元件中配置的體驗片段。

元件輸出示例

要體驗Experience Fragment元件，並查看其配置選項以及HTML和JSON輸出的示例，請訪問 元件庫。

技術詳細資訊

有關體驗片段元件的最新技術文檔 可在GitHub上找到。

有關開發核心元件的詳細資訊，請參閱 核心元件開發人員文檔。

配置對話框

通過「配置」對話框，內容作者可以選擇應在頁面上呈現的體驗片段變體。

體驗片段元件的編輯對話框

使用 開啟選擇對話框 按鈕以開啟元件選擇器，以選擇要添加到內容頁面的體驗片段元件變體。

如果將「體驗片段」元件添加到模板，請注意，如果「體驗片段」已本地化，則它將自動本地化，因此在頁面上呈現的內容可能與您明確選擇的元件不同。 請參閱上面的示例 的子菜單。

也可以定義 ID。 此選項允許控制HTML和 資料層。

  • 如果留空，則系統會為您自動生成唯一ID，並通過檢查生成的頁面來找到它。
  • 如果指定了ID，則作者有責任確保其唯一。
  • 更改ID可能會影響CSS、JS和資料層跟蹤。

樣式頁籤

「體驗片段」元件的「編輯」對話框的「樣式」頁籤

體驗片段元件支AEM持 樣式系統。。

使用下拉框選擇要應用於元件的樣式。 在編輯對話框中所做的選擇與從元件工具欄中選擇的選項具有相同的效果。

必須在 設計對話框 以便下拉菜單可用。

設計對話框

設計對話框允許模板作者定義內容作者可用的選項，內容作者使用「體驗片段元件」以及放置「體驗片段元件」時設定的預設值。

樣式頁籤

體驗片段元件支AEM持 樣式系統。

本頁內容