Single Directory Components: Display

DrupalのフィールドとView modeをSingle Directory Components（SDC）と統合し、エンティティ表示をコンポーネントテンプレートでレンダリングできるようにします。

sdc_display
1,244 sites
47
drupal.org
gui api field theme
SDC components single-directory-components theming field-display view-modes field-formatters component-based frontend display-modes field-group

概要

SDC Displayは、Drupalのコンテンツ表示システムとSingle Directory Components（SDC）を橋渡しします。SDCはDrupal 10.1で導入されたモダンなコンポーネントベースのテーマシステムです。このモジュールにより、サイトビルダーはエンティティフィールドをコンポーネントのpropsやslotsに直接マッピングでき、カスタムのpreprocessフックやテーマオーバーライドが不要になります。

このモジュールは3つの異なるレベルで動作します。個々のField formatterがその出力をコンポーネントでラップできる、View mode全体がフィールドを特定の入力にマッピングしてコンポーネントテンプレートでレンダリングできる、そしてField groupがSDCコンポーネントを使用してレンダリングできる、という3つです。これにより、データとプレゼンテーションのクリーンな分離を維持しながら、コンテンツの表示方法に前例のない柔軟性を提供します。

コンポーネントベースのアーキテクチャを活用することで、SDC Displayは再利用可能で保守しやすいフロントエンドコードを促進します。コンポーネントは独自のスキーマ（propsとslots）を定義し、このモジュールはそれらのスキーマに基づいて設定フォームを自動生成するため、コンテンツ編集者やサイトビルダーはDrupalの使い慣れた管理インターフェースでマッピングを設定できます。

Features

  • 設定可能なprop/slotマッピングを使用して、個々のField formatterをSDCコンポーネントでレンダリング
  • View mode全体をコンポーネントでラップし、複数のエンティティフィールドをコンポーネント入力にマッピング
  • フィールドグループをまとまったコンポーネントとしてレンダリングするField Group統合
  • 静的および動的マッピングのサポート - フィールド値が空の場合のフォールバックとして静的値を使用
  • タグベースのフィルタリングで関連するコンポーネントのみを表示するコンポーネントセレクター
  • prop/slot設定用のコンポーネントJSONスキーマに基づいて自動生成されるフォーム
  • 利用可能なマッピングを動的に更新するAJAX対応のコンポーネント選択
  • コンポーネントに自動的に渡されるエンティティメタデータ（id、entity_type、bundle）
  • Drupalの既存のField formatterおよびView modeシステムとのシームレスな統合
  • schema-formsライブラリによる複雑なネストしたprop構造のサポート

Use Cases

コンテンツティーザー用のカードコンポーネント

画像、タイトル、要約、リンク用のpropsを持つ再利用可能なカードコンポーネントを作成します。記事のティーザーView modeでこのカードコンポーネントを使用するよう設定し、画像フィールドをimage propに、タイトルをtitle propに、本文の要約をsummary slotに、ノードURLをlink propにマッピングします。すべての記事ティーザーがカードコンポーネントで一貫してレンダリングされます。

ランディングページ用のヒーローバナー

見出し、本文コンテンツ、CTAボタン用のslotsを持つヒーローバナーコンポーネントを設計します。ランディングページのView modeでSDC Displayを有効にし、ページタイトルを見出しに、WYSIWYGボディフィールドをコンテンツslotに、リンクフィールドをCTA slotにマッピングします。静的値は、設定されていない場合のフォールバックCTAを提供します。

商品グリッドアイテム

価格、在庫状況、画像URL用のpropsと説明用のslotを持つ商品表示コンポーネントを構築します。Commerceの商品フィールドをこれらの入力にマッピングし、「カートに追加」ボタンテキストには静的値を使用します。コンポーネントはすべての商品表示で視覚的な一貫性を維持します。

グループ化された連絡先情報

Field Groupを使用して住所、電話番号、メールフィールドをグループ化します。SDC Display Field Group formatterをcontact-cardコンポーネントで適用します。住所をaddress slotに、電話番号をphone propに、メールをemail propにマッピングします。グループ化されたフィールドは、まとまった連絡先カードコンポーネントとしてレンダリングされます。

著者署名欄

記事用の著者署名欄コンポーネントを作成します。フィールドレベルで、著者参照フィールドのformatterを署名欄コンポーネントでレンダリングするよう設定し、レンダリングされた著者表示をauthor slotにマッピングします。各著者フィールドインスタンスがコンポーネントでレンダリングされます。

Tips

  • コンポーネントを意図された用途に応じてタグ付けしてください - Field formatterには通常単一入力のコンポーネントが必要で、View modeコンポーネントは複数の入力を受け入れる必要があります
  • 静的マッピングは必須値のフォールバックとして使用してください - コンポーネントスキーマでpropが必須の場合、常に静的値を提供してください
  • 複雑なデータ変換には、レンダリングされた出力ではなく生のフィールドデータをコンポーネントpropsに渡すためにNoMarkupモジュールの使用を検討してください
  • コンポーネントはエンティティメタデータ（id、entity_type、bundle）を自動的にpropsとして受け取り、動的な動作に便利です
  • 複数のフィールドを1つのslotにマッピングできます - 表示テーブルの重み順でレンダリングされます
  • 静的フォールバックが正しく機能することを確認するため、空のフィールド値でテストしてください
  • エンティティ全体をラップしたくない場合は、部分的なコンポーネントレンダリングにField Group統合を使用してください

Technical Details

Admin Pages 2
表示管理（コンテンツタイプ） /admin/structure/types/manage/{bundle}/display

異なるView modeでエンティティフィールドをどのように表示するかを設定します。SDC Displayは各Field formatterとView mode全体にオプションを追加します。

Field FormatterのSDC設定 /admin/structure/types/manage/{bundle}/display (Field Formatter Settings)

各Field formatterの設定フォームにSDC Displayオプションが追加され、単一のフィールドをコンポーネントでレンダリングできるようになります。

Hooks 5
hook_field_formatter_third_party_settings_form

すべてのField formatterの設定フォームにSDC Displayオプションを追加し、フィールドレベルでのコンポーネントベースのレンダリングを可能にします。

hook_field_formatter_settings_summary_alter

Field formatter設定のサマリーを変更して、SDC Displayの設定状態を表示します。

hook_preprocess_field

フィールド出力を前処理し、有効な場合は設定されたSDCコンポーネントでラップします。

hook_form_entity_view_display_edit_form_alter

エンティティ表示編集フォームにView modeレベルのSDC Display設定を追加します。

hook_entity_view_alter

エンティティのレンダー配列を変更し、View mode全体の出力を設定されたSDCコンポーネントでラップします。

Troubleshooting 5
セレクターにコンポーネントが表示されない

コンポーネントのcomponent.ymlファイルで'sdc_display:field_formatter'または'sdc_display:view_mode'タグが付いていることを確認してください。タグを追加した後はキャッシュをクリアしてください。

マッピングが保存されない

formatter設定フォームがView mode設定と干渉する場合に発生することがあります。モジュールは回避策として生のユーザー入力を使用します。JavaScriptが有効で、JSエラーが発生していないことを確認してください。

コンポーネントはレンダリングされるがフィールドが空

マッピングしたいフィールドが表示管理フォームで有効（無効セクションにない）になっていることを確認してください。有効なフィールドのみがマッピングオプションに表示されます。

静的値が表示されない

静的値はマッピングされたフィールドが空の場合にのみ表示されます。フィールドにデータがないことを確認するか、常に静的値を表示するには動的マッピングを削除してください。

View modeフォームにSDCオプションが表示されない

そのView modeでLayout Builderが有効な場合、SDC Displayは無効になります。SDC Displayを使用するにはLayout Builderを無効にするか、代わりにLayout Builder内でコンポーネントを使用してください。