Headless SXA でデモサイトを構築する - Part 7 ページテンプレートの制御をする

公開日 :

ヘッダーとフッターが出来上がりましたが、これをデフォルトのページに必ず入れておく形にしていきたいと思います。これを実現する機能はページデザインとなりますので、今回はこれを紹介します。

ページデザインを確認する

ページデザインとして標準ものが1つ含まれています。

random desc

この Default をクリックすると、以下のダイアログが表示されます。

random desc

左側には現在利用することができるパーシャルデザインが一覧になっています。また、以前に Demo Header を設定しているため元々セットアップしていたものと異なりますが Header と Footer が1つづつあります。今回、新しく Demo footer を作成したので以下の様に変更しました。

random desc

実際にデフォルトのページデザインは全てのアイテムに現在は適用されているため、Products のページを見ると以下の様になっています。

random desc

ヘッダーおよびフッターが設定されており、メインの部分に関してはパーシャルデザインを設定していないためコンポーネントを配置することができる様になっています。

ページデザインでの表示順序

上記の状態で、デフォルトで用意されている Header を設定したいと思います。順番は以下の通りです。

random desc

この場合、上から順にパーシャルデザインが適用される形となるため、カスタムで作成しているヘッダー、そしてその下に標準のヘッダーが表示される様な形に変わります。

random desc

ヘッダーが2つあっても仕方がないので、今回は元に戻します。

メインエリアのパーシャルデザインを追加する

今回はデモ用ということで簡単なメインエリアを構成するパーシャルデザインを作成します。まず Demo Main を作成します。

random desc

今回はメインエリアにコンポーネントを配置していきます。今回は Row Splitter を配置して2つのエリアを作成し、そこに Title と Page Content を配置します。

random desc

これで新しいページデザインで利用するメインのパーシャルデザインの準備ができました。

新しいページテンプレートを作成する

メニューから新しいページデザインを作成するために、下記のメニューの項目をクリックします。

random desc

以下の様に名前を Demo Page とします。

random desc

ページで利用するパーシャルデザインを設定します。これまで作成してきた3つの Demo のパーシャルデザインを適用します。

random desc

設定後、保存をすることでページデザインの設定が完了します。

ページテンプレートを変更する

今回作成をしたメインのパーシャルデザインは、アイテムのタイトルとコンテンツを呼び出す形になっています。以下の様な情報を改めてアイテムに入力しておきます。

random desc

このアイテムのページを指定する項目が Designing の下に設定されており、今回作成をした Page Design が一覧に表示されています。

random desc

変更後、エクスペリエンスエディターで該当アイテムを開くと以下のようにみたまま編集が可能となっています。

random desc

まとめ

今回はページデザインに関して紹介をしました。表示する順番の制御や、メインのエリアと組み合わせたパーシャルデザインをどういう形で設定することができるのか、も含めて確認をして、新しいデザインを作成しました。