文件

多欄位容器在通用編輯器中產生空的HTML或重複區塊

Last update: Wed Jun 03 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Edge Delivery (xwalk/xcom)的Universal Editor中的多欄位容器在設定多值容器欄位時，會呈現空白的HTML元素或重複的區塊標籤。 若要解決此問題，請移轉至容器和專案區塊模式。

說明 description

環境

  • 產品： Adobe Experience Manager as a Cloud Service (AEMaaCS) — 網站
  • 案例：使用通用編輯器的Edge Delivery (xwalk/xcom)

問題/症狀

  • 容器編寫的專案無法產生預期的HTML輸出，導致空的<div>元素。
  • 將多個欄位新增至多欄位元件時，會針對單一容器例項產生重複的HTML區塊。
  • 重新整理編輯器檢視會暫時移除重複的區塊，但在後續編輯後重複則會重新顯示。

解決方法 resolution

請依照下列步驟解決問題：

  1. 從現有元件模型移除多值容器欄位，以停止產生重複或空白的標籤。

  2. 在父容器區塊模型中保留簡單欄位（例如頂端和底部文字），以維護版面層級內容。

  3. 建立專屬的專案區塊模型，並為每個專案定義個別欄位，例如文字或影像欄位。 料號區塊與容器模型結構範例：

    code language-none 
    {
      "definitions": [
        {
          "title": "Multifield Container",
          "id": "multifield-container-component",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-component",
                  "model": "multifield-container-component",
                  "filter": "multifield-container-component"
                }
              }
            }
          }
        },
        {
          "title": "Multifield Container Item",
          "id": "multifield-container-item",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "multifield-container-item",
                  "model": "multifield-container-item"
                }
              }
            }
          }
        }
      ] ,
      "models": [
        {
          "id": "multifield-container-component",
          "fields": [
            {
              "component": "text",
              "name": "topText",
              "label": "Top of container",
              "valueType": "string"
            },
            {
              "component": "text",
              "name": "bottomText",
              "label": "Bottom of container",
              "valueType": "string"
            }
          ]
        },
        {
          "id": "multifield-container-item",
          "fields": [
            {
              "component": "text",
              "name": "itemText",
              "label": "Item text",
              "valueType": "string"
            },
            {
              "component": "reference",
              "name": "itemImage",
              "label": "Item image",
              "valueType": "string",
              "multi": false
            },
            {
              "component": "text",
              "name": "itemImageAlt",
              "label": "Item image alt text",
              "valueType": "string"
            }
          ]
        }
      ] ,
      "filters": [
        {
          "id": "multifield-container-component",
          "components": [ "multifield-container-item"]
        }
      ]
    }

  4. 在通用編輯器中設定篩選器，以允許上層容器區塊下的專案區塊。 在此範例中，篩選器會確保容器僅接受專案區塊：

    code language-none 
    {      "id": "multifield-container-component",
  "components": [ "multifield-container-item"]
}

    容器定義必須參考此篩選器： "filter": "multifield-container-component"，而包含id: "multifield-container-component"的篩選器會將容器限製為僅接受多欄位 — 容器 — 專案。

  5. 以接受專案區塊的子區塊槽取代多欄位式巢狀容器，以更新父元件。

  6. 如果專案設定需要容器和專案區塊的區塊指令碼，請新增這些區塊指令碼。

  7. 透過標準管道建置和部署更新的模型和元件。

  8. 在通用編輯器中重新編寫內容，方法是在容器區塊內為每個必要專案新增一個專案區塊。

  9. 驗證輸出以確認每個區塊轉譯一次，並產生乾淨且無重複的HTML。

模型行為 — 專案區塊模型（多欄位 — 容器 — 專案）

  • 每個編寫的專案會建立一個區塊例項，其中包含：

    • itemText (text)
    • itemImage (reference) — 通常會在參照的DAM資產為影像時解析為影像
    • itemImageAlt (text) — 用於影像替代文字

附註:

  • Universal Editor會將多值容器欄位模式(component: "container"、multi: true)視為早期存取，這會導致Edge Delivery環境中的轉譯不穩定並造成區塊重複。
  • 將multi: true設定為multi: false可防止複製，但限制僅製作單一容器專案。
  • 搭配專案區塊使用容器區塊會與支援的通用編輯器模型一致，並確保呈現一致且穩定的HTML。

相關閱讀

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f