マルチフィールドコンテナは、ユニバーサルエディターで空のHTMLまたは重複ブロックを生成します
Edge Delivery用ユニバーサルエディター（xwalk/xcom）のマルチフィールドコンテナは、複数値のコンテナフィールドで設定された場合、空のHTML要素をレンダリングするか、ブロックマークアップを複製します。 この問題を解決するには、コンテナとアイテム ブロック パターンに移行します。
説明 description
環境
- 製品： Adobe Experience Manager as a Cloud Service （AEMaaCS） - Sites
- シナリオ： ユニバーサルエディターを使用したEdge Delivery （xwalk/xcom）
問題/症状
- コンテナで作成されたアイテムが、想定されるHTML出力を生成できず、空の
<div>要素が発生します。 - 複数のフィールドをマルチフィールドコンポーネントに追加すると、1つのコンテナインスタンスに対して重複したブロック HTMLがレンダリングされます。
- エディタービューを更新すると、重複したブロックは一時的に削除されますが、その後の編集後に重複が再度表示されます。
解決策 resolution
この問題に対処するには、次の手順に従います。
-
既存のコンポーネントモデルから複数値のコンテナフィールドを削除して、重複または空のマークアップ生成を停止します。
-
親コンテナブロックモデルの上テキストや下テキストなどのシンプルなフィールドを使用して、レイアウトレベルのコンテンツを維持できます。
-
専用のアイテムブロックモデルを作成し、テキストや画像のフィールドなど、各アイテムの個々のフィールドを定義します。 アイテムブロックとコンテナモデル構造の例：
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"] } ] } -
親コンテナブロックの下でアイテムブロックを許可するように、ユニバーサルエディターでフィルターを設定します。 この例では、フィルターはコンテナがアイテムブロックのみを受け入れることを保証します。
code language-none { "id": "multifield-container-component", "components": [ "multifield-container-item"] }コンテナ定義はこのフィルターを参照する必要があります：
"filter": "multifield-container-component"。また、id: "multifield-container-component"を含むフィルターは、マルチフィールドのcontainer-itemのみを受け入れるようにコンテナを制限します。 -
マルチフィールドベースのネストされたコンテナを、アイテムブロックを受け入れる子ブロックスロットに置き換えて、親コンポーネントを更新します。
-
プロジェクト設定で必要な場合は、コンテナブロックとアイテムブロックの両方にブロックスクリプトを追加します。
-
更新されたモデルとコンポーネントを構築し、標準パイプラインにデプロイします。
-
コンテナブロック内の必要なエントリごとに1つのアイテムブロックを追加して、ユニバーサルエディターでコンテンツを再作成します。
-
出力を検証して、各ブロックが1回レンダリングされ、重複のないクリーンなHTMLが生成されることを確認します。
モデルの動作 – 項目ブロック モデル （multifield-container-item）
-
各オーサリング済みエントリは、次を使用して1つのブロックインスタンスを作成します。
itemText (text)itemImage (reference)– 通常、参照されるDAM アセットが画像である場合に画像に解決されますitemImageAlt (text)– 画像の代替テキストに使用
注意：
- ユニバーサルエディターは、複数値のコンテナフィールドパターン （
component: "container",multi: true）を早期アクセスとして扱うため、Edge Delivery環境でレンダリングが不安定になり、ブロックが重複します。 multi: trueをmulti: falseに設定すると、重複は回避されますが、オーサリングは単一のコンテナエントリに制限されます。- アイテムブロックを含むコンテナブロックを使用すると、サポートされているユニバーサルエディターモデルに合わせて、一貫性のある安定したHTML レンダリングが実現します。