Drupal8でカスタムレイアウトビルダーを作成する方法

公開: 2019-10-15

Drupal 8は、コンテンツ作成者にとって物事を非常に簡単にします。最も重要な理由の1つは、コアDrupal 8にレイアウトビルダーモジュールが追加されたことです。簡単なドラッグアンドドロップインターフェイス、プレビュー、およびカスタマイズ機能により、レイアウトビルダーは間もなくお気に入りのページ構築および設計ツールになります。

前回の記事では、Drupal8のレイアウトビルダーのインストールと使用を開始する方法について書きました。ここでは、独自の要件に合わせてレイアウトビルダーをカスタマイズするための知識を共有したいと思います。

drupal Webサイトに複数のブロックを持つ複数のセクションが必要な場合、Drupalが提供するデフォルトのセクションを使用することはできません。このために、独自のカスタムレイアウトを作成できます。

レイアウトビルダー入門：

まず、カスタムレイアウトビルダー用のカスタムレイアウトビルダーモジュールを作成します。フォルダーにcustom_layoutという名前を付けます。次に、info.ymlファイルを作成します。そのための基本的なキーを指定する必要があります。 drupal 8のカスタムレイアウトビルダーは、レイアウトビルダーモジュールに依存します。ここで指定しましょう。

 コード：
名前： 'カスタムレイアウト'
タイプ：モジュール
説明： 'レイアウトを構築する方法を提供します'
コア：8.x
パッケージ： 'カスタム'
依存関係：
 --layout_builder：layout_builder

次に、layouts.ymlファイルを作成して、カスタムレイアウトの領域を指定します。

custom_layout：カスタムレイアウトビルダーレイアウトのキー。
label：カスタムレイアウトビルダーレイアウトのラベル。
category：カスタムレイアウトビルダーレイアウトのカテゴリ。
default_region：デフォルトのリージョンは、すべてのタイプのレイアウトでデフォルトのリージョンです。
icon_map：レイアウトを選択するときに表示されるアイコン。

例えば：

上記のアイコンマップを作成するには、以下の手順に従う必要があります。

1.最初の行は「HeaderLeft」と「HeaderRight」です。
指定しました-[ header_left、header_left、header_right ] --header_left is
2回定義されているため、画面の全幅の2つの部分が必要になり、header_rightが残りの部分を占めるため、比率は「75％/ 25％」になります。
2.2行目は「コンテンツ」と「サイドバー」です
ここで適用される上記のロジックと同じ-[コンテンツ、コンテンツ、サイドバー]を指定しました。
3.3行目は「FooterLeft」と「FooterRight」です。
-[ footer_left、footer_right] -を指定しました。リージョンが2つしかないため、それぞれ50％かかります。

リージョン：レイアウトに必要なリージョン。 header_left、header_right、sidebar、content、footer_left、footer_rightがあります。

コード：

 custom_layout：
 ラベル： 'カスタムレイアウト'
 カテゴリ：「カスタムレイアウト」
 default_region：コンテンツ
 icon_map：
   -[header_left、header_left、header_right]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[footer_left、footer_right]

 地域：
   header_left：
     ラベル：ヘッダー左
   header_right：
     ラベル：ヘッダー右
   サイドバー：
     ラベル：サイドバー
   コンテンツ：
     ラベル：コンテンツ
   footer_left：
     ラベル：フッター左
   footer_right：
     ラベル：フッター右

次に、レイアウトのhtml構造を作成しましょう。モジュール内に「layouts」という名前のフォルダーを作成します。このフォルダーに、「custom_layout」という名前の別のフォルダーを作成します

そして、そのフォルダー内に、「custom-layout.html.twig」という名前のtwigファイルを作成します。

layouts.ymlでtwigファイルを指定する必要があります

パス：HTML構造が書き込まれるフォルダーを指定します
template：パスの下のこのレイアウトに使用する小枝テンプレートを指定します。

 コード：

custom_layout：
 ラベル： 'カスタムレイアウト'
 パス：layouts / custom_layout
 カテゴリ：「カスタムレイアウト」
 テンプレート：カスタムレイアウト
 default_region：コンテンツ
 icon_map：
   -[header_left、header_left、header_right]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[footer_left、footer_right]

 地域：
   header_left：
     ラベル：ヘッダー左
   header_right：
     ラベル：ヘッダー右
   サイドバー：
     ラベル：サイドバー
   コンテンツ：
     ラベル：コンテンツ
   footer_left：
     ラベル：フッター左
   footer_right：
     ラベル：フッター右

次に、リージョンのhtml構造を「custom-layout.html.twig」ファイルに記述します。
クラスに「layout」と「layout--custom-layout」を設定し、その中にコンテンツ全体をラップします。
layouts.ymlで定義されているリージョンを指定します。これらのリージョンには、「{{content.header_left}}」のようにアクセスできます。

コード：

{％set classes = [
'レイアウト'、
'layout--custom-layout'、
]％}
{コンテンツの場合は％％}
<div {{attributes.addClass（classes）}}>
{％if content.header_left％}
<div {{region_attributes.header_left.addClass（ 'layout__region'、 'layout__region--header_left'）}}>
{{content.header_left}}
</ div>
{％endif％}
{％if content.header_right％}
<div {{region_attributes.header_right.addClass（ 'layout__region'、 'layout__region--header_right'）}}>
{{content.header_right}}
</ div>
{％endif％}
{％if content.content％}
<div {{region_attributes.content.addClass（ 'layout__region'、 'layout__region--content'）}}>
{{content.content}}
</ div>
{％endif％}
{％if content.sidebar％}
<div {{region_attributes.sidebar.addClass（ 'layout__region'、 'layout__region--sidebar'）}}>
{{content.sidebar}}
</ div>
{％endif％}
{％if content.footer_left％}
<div {{region_attributes.footer_left.addClass（ 'layout__region'、 'layout__region--footer_left'）}}>
{{content.footer_left}}
</ div>
{％endif％}
{％if content.footer_right％}
<div {{region_attributes.footer_right.addClass（ 'layout__region'、 'layout__region--footer_right'）}}>
{{content.footer_right}}
</ div>
{％endif％}
</ div>
{％endif％}

html構造を記述した後、リージョンごとにcssを記述する必要があります。カスタムモジュールにlibrary.ymlを作成します。

コード：

 custom_layout：
バージョン：バージョン
css：
   テーマ：
     css / custom_layout.css：{}

そのライブラリをlayouts.ymlで定義します

コード：

 custom_layout：
 ラベル： 'カスタムレイアウト'
 パス：layouts / custom_layout
 カテゴリ：「カスタムレイアウト」
 テンプレート：カスタムレイアウト
 ライブラリ：custom_layout / custom_layout
 default_region：コンテンツ
 icon_map：
   -[header_left、header_left、header_right]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[コンテンツ、コンテンツ、サイドバー]
   -[footer_left、footer_right]

 地域：
   header_left：
     ラベル：ヘッダー左
   header_right：
     ラベル：ヘッダー右
   サイドバー：
     ラベル：サイドバー
   コンテンツ：
     ラベル：コンテンツ
   footer_left：
     ラベル：フッター左
   footer_right：
     ラベル：フッター右

それでは、リージョンブロックのスタイリングから始めましょう。各地域の構造を以下のように指定します-

コード：

 .layout--custom-layout {
 表示：-webkit-box;
 表示：-ms-flexbox;
 表示：フレックス;
 -ms-flex-wrap：ラップ;
 フレックスラップ：ラップ;
}

@media screen and（min-width：40em）{
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex：0;
   -ms-flex：0 1 70％;
   フレックス：0 1 70％;
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex：0;
   -ms-flex：0 1 30％;
   フレックス：0 1 30％;
 }

 .layout--custom-layout .layout__region--content {
   -webkit-box-flex：0;
   -ms-flex：0 1 70％;
   フレックス：0 1 70％;
 }

 .layout--custom-layout .layout__region--sidebar {
   -webkit-box-flex：0;
   -ms-flex：0 1 30％;
   フレックス：0 1 30％;
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex：0;
   -ms-flex：0 1 50％;
   フレックス：0 1 50％;
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex：0;
   -ms-flex：0 1 50％;
   フレックス：0 1 50％;
 }
}

次に、カスタムモジュールを有効にします

[構造] -> [コンテンツタイプ]に移動し、任意のコンテンツタイプの[表示の管理]をクリックします。今のところ、「記事」コンテンツタイプを使用します。

カスタムレイアウトを選択した後-