Recommended
More Related Content
What's hot
What's hot (20)
Similar to D8でコンテンツをレイアウトする手法について
Similar to D8でコンテンツをレイアウトする手法について (20)
D8でコンテンツをレイアウトする手法について
- 1. Drupal SAPPORO オープンソース カンファレンス 2018 Hokkaido 2018年7月7日(土) ＠札幌コンベンションセンター 16:10～16:55
- 2. Drupal SAPPORO Drupal 8 テーマ入門 という予定でしたが、 あまりにも漠然としているので 対象もう少しを絞りまして…
- 3. Drupal SAPPORO コンテンツのレイアウト という視点から Drupal 8 とテーマを眺めてみたいと思います
- 4. Drupal SAPPORO 自己紹介 • 白根健司（しらねけんじ） • Drupal さっぽろ • http://drupalsapporo.net/ • ※ 「Drupal さっぽろ」 で検索 • 札幌近郊の Drupal ユーザーによるローカルコミュニティ • 月例の勉強会 • OSC Hokkaido 参加 • 温泉合宿（Drupal ONSEN）
- 5. Drupal SAPPORO 今日の内容 • テーマ作成ハンズオンについて • ２つのレイアウト手法 • ページ内の各リージョンにブロックを配置する方法 • 単一のリージョン内でフィールドをレイアウトする方法 • umami プロファイルを利用したデモ • エンティティ参照によるコンテンツ統合とレイアウト • レイアウト関連 D8 コアモジュール • Field Layout、Layout Builder（experimental） • まとめ
- 7. Drupal SAPPORO ブロックシステムの 「リージョン」 について ページ リージョン リージョンの種類と ページ内のレイアウトが テーマによって定義される。
- 11. Drupal SAPPORO この手法については… • CMSMix での Drupal 8 テーマ作成ハンズオンで解説 • https://www.slideshare.net/bkenro/cmsmix-sapporo- vol3-drupal-81323508 • 今日は、これと違うレイアウト手法を見ていくことにします。
- 12. Drupal SAPPORO Drupal のコンテンツは "fieldable" • ノード • Drupal システム上に蓄積されるコンテンツの単位 • コンテンツタイプで型と構造を定義 • 任意の数のフィールドを持てる • ブロック (狭義) • コアのブロックシステムを利用して定義される汎用ブロック • ブロックタイプで型と構造を定義 • 任意の数のフィールドを持てる ・・・
- 13. Drupal SAPPORO フィールドに基づくコンテンツの配置 メインページコンテンツ ブロック 「調理時間」 フィールド 「難易度」 フィールド 「調理手順」 フィールド 「材料」 フィールド 特定のブロック／リージョン内で フィールドの出力コンテンツを どう配置するか、という問題として コンテンツのレイアウトを考える
- 14. Drupal SAPPORO 「ディスプレイモード」 について • コンテンツエンティティに異なるプレゼンテーションを与える仕組み • 次の2つがある： ・ ビューモード（表示用） ・ フォームモード（編集用） • 詳しくはこちら： • Display Modes, View Modes, and Form Modes • https://www.drupal.org/docs/8/api/entity-api/display-modes- view-modes-and-form-modes
- 15. Drupal SAPPORO サンプル：umami プロファイルによるサイト • umami プロファイルとは • Drupal 8.5 で追加 • 料理雑誌を題材にしたデモサイト構築用インストールプロファイル • umami テーマ、サンプルコンテンツ、各種構成が設定済みのサイトができる
- 16. Drupal SAPPORO (参考) umami インストールプロファイルの使い方 • 場所： • core/profiles/demo_umami/ • 隠しプロファイル属性を解除して使う • インストール開始前に下記ファイルを編集： • core/profiles/demo_umami/demo_umami.info.yml • 6行目付近 hidden: true → hidden: false • これにより、インストール時のプロファイルの選択肢として umami が表示される • umami テーマ • core/profiles/demo_umami/themes/umami
- 17. Drupal SAPPORO Recipe コンテンツタイプ • 料理レシピ用のコンテンツタイプ • 内部名：recipe • サンプルコンテンツあり ・・・
- 19. Drupal SAPPORO umami で定義されているビューモード ノードの 全体表示用 Views の コンテンツ表示用
- 20. Drupal SAPPORO (参考) テンプレートの提案（suggestion） • suggestion とは？ • コアをオーバーライドできるテンプレートファイル名の候補のこと • 適用範囲などが異なる複数のテンプレート名の候補が存在する場合がある • 優先順位が決まっている • 優先順位の高い順に探索し、テーマ内で最初に見つかったものが適用される • 具体的なファイル名の候補は下記を参照 • https://www.drupal.org/docs/8/theming/twig/twig-template- naming-conventions 種々の条件に対応して 適用されるテンプレートの候補を ファイル名パターンとして提示します たとえば、ブロックのテンプレートなら・・・
- 21. Drupal SAPPORO (参考) Twig テンプレートの命名規則 • テンプレートファイルの選択ルール • 出力を構成する各パートごとに決められた命名規則に基づいて 該当するファイルが読み込まれ、実行される • 命名規則の例 • HTML テンプレート • HTML ページの基本構造を定義するテンプレート • デフォルト： core/modules/system/templates/html.html.twig • オーバーライド： 1. html-internalviewpath.html.twig 2. html--node--id.html.twig 3. html.html.twig その他の例は下記資料を参照： https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions
- 22. Drupal SAPPORO (参考) テンプレート名の候補の確認 • Twig デバッグを有効するとテンプレート名の候補を確認できる <!-- THEME DEBUG --> <!-- THEME HOOK: 'html' --> <!-- FILE NAME SUGGESTIONS: * html--front.html.twig * html--node.html.twig x html.html.twig --> <!-- BEGIN OUTPUT from 'themes/oscdemo/html.html.twig' --> <!DOCTYPE html> <html> ・・・ </html> <!-- END OUTPUT from 'themes/cmsmix2/html.html.twig' --> テンプレート ファイル名の提案の一覧と 現在使用されているテンプレートファイルが コメントとして出力されるようになる。 現在のページ生成で使用された 候補ファイル名には x が表示される
- 23. Drupal SAPPORO ビューモードと Twig テンプレートの対応 • ノードのテンプレート ファイル名： • パターン： node--[type|nodeid]--[viewmode].html.twig • ベーステンプレート： node.html.twig • core/modules/node/templates/node.html.twig • Recipe コンテンツタイプの full ビューモードの場合： → node--recipe--full.html.twig コンテンツタイプ名 ビューモード名
- 24. Drupal SAPPORO umami テーマのテンプレートを見ると… recipe コンテンツタイプの full ビューモード用テンプレート
- 25. Drupal SAPPORO ・・・ <article{{ attributes.addClass(classes) }}> {{ title_prefix }} <header class="node__header"> <h1 class="page-title"> {{ label }} </h1> {% if display_submitted %} <div{{ author_attributes.addClass('node__submitted') }}> {% trans %}<span class="by-author">by {{ author_name }}</span> {{ created_date }}{% endtrans %} {{ metadata }} </div> {% endif %} {{ content.field_recipe_category }} {{ content.field_tags }} </header> {{ title_suffix }} <div{{ content_attributes.addClass('node__content') }}> <div class="layout__region--top"> <div class="layout__region layout__region--top-first"> {{ content.field_image }} </div> ・・・ node--receipe--full.html.twig このテンプレートを編集することで コンテンツブロック内のレイアウトを定義できる。
- 26. Drupal SAPPORO エンティティ参照によるコンテンツの統合 • 参照元ノードのビューモードで表示を制御 • 参照先のコンテンツをテンプレート内で組み込む Recipe コンテンツ • 調理時間 • 難易度 • 材料 • 調理手順 … Recipe category タクソノミーターム • アイコン画像 参照元のフィールドと参照先のフィールドを統合し、 Twig テンプレートでレイアウトを定義する エンティティ 参照
- 28. Drupal SAPPORO Views での利用 • 例：フロントページ • 表示フォーマット 「コンテンツ」 • ビューモードを指定する
- 29. Drupal SAPPORO <article{{ attributes.addClass(classes) }}> <div{{ content_attributes.addClass('node__content') }}> {{ content.field_image }} </div> <div class="node__meta"> {{ content.field_difficulty }} {{ title_prefix }} {% if not page %} <h2{{ title_attributes.addClass('node__title') }}> <a class="node__link" href="{{ url }}" rel="bookmark">{{ label }}</a> </h2> {% endif %} {{ title_suffix }} <div class="read-more"> <a class="read-more__link" href="{{ url }}">{{ 'View'|t }} {{ node.bundle }}</a> </div> </div> </article> node--highlighted-bottom.html ビューモードのテンプレートで Views の表示要素となる ボックス内部のレイアウトを定義
- 30. Drupal SAPPORO レイアウト関連の (試験的) コアモジュール • 今回の手法をサポートするモジュールがコア入りする可能性 • そうなれば、この方法がデファクト標準になるかも？
- 31. Drupal SAPPORO まとめ • D8 コアによる２つのコンテンツのレイアウト手法： • テーマで定義したリージョンにブロックを配置する方法 • 単一リージョン内でフィールド出力を配置する方法 • ディスプレイモード • １つのエンティティに異なるプレゼンテーションを与える手段 • ビューモード（表示用）とフォームモード（編集用）に分かれる • 表示管理、Twig テンプレートはビューモードごとに定義できる • エンティティ参照の利用 • エンティティの参照関係を利用してコンテンツを編成＆レイアウトできる • D8 コアのレイアウト関連モジュール • Field Layout、Layout Builder：レイアウトのデファクト？
Editor's Notes
- 詳細は下記、およびDrupal本の巻末付録の翻訳 https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions