Tailwind Logo

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

XM CloudHeadless SXA

公開日: 2023-02-15

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

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

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

page01.png

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

page02.png

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

page03.png

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

page04.png

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

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

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

page05.png

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

page06.png

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

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

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

page07.png

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

page08.gif

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

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

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

page09.png

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

page10.png

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

page11.png

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

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

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

page12.png

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

page13.png

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

page14.png

まとめ

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

関連タグ