| title | date | tags | draft | summary | images | ||||
|---|---|---|---|---|---|---|---|---|---|
Headless SXA でデモサイトを構築する - Part 7 ページテンプレートの制御をする |
2023-02-15 |
|
true |
ヘッダーとフッターが出来上がりましたが、これをデフォルトのページに必ず入れておく形にしていきたいと思います。これを実現する機能はページデザインとなりますので、今回はこれを紹介します。 |
|
ヘッダーとフッターが出来上がりましたが、これをデフォルトのページに必ず入れておく形にしていきたいと思います。これを実現する機能はページデザインとなりますので、今回はこれを紹介します。
ページデザインとして標準ものが１つ含まれています。
この Default をクリックすると、以下のダイアログが表示されます。
左側には現在利用することができるパーシャルデザインが一覧になっています。また、以前に Demo Header を設定しているため元々セットアップしていたものと異なりますが Header と Footer が１つづつあります。今回、新しく Demo footer を作成したので以下の様に変更しました。
実際にデフォルトのページデザインは全てのアイテムに現在は適用されているため、Products のページを見ると以下の様になっています。
ヘッダーおよびフッターが設定されており、メインの部分に関してはパーシャルデザインを設定していないためコンポーネントを配置することができる様になっています。
上記の状態で、デフォルトで用意されている Header を設定したいと思います。順番は以下の通りです。
この場合、上から順にパーシャルデザインが適用される形となるため、カスタムで作成しているヘッダー、そしてその下に標準のヘッダーが表示される様な形に変わります。
ヘッダーが２つあっても仕方がないので、今回は元に戻します。
今回はデモ用ということで簡単なメインエリアを構成するパーシャルデザインを作成します。まず Demo Main を作成します。
今回はメインエリアにコンポーネントを配置していきます。今回は Row Splitter を配置して２つのエリアを作成し、そこに Title と Page Content を配置します。
これで新しいページデザインで利用するメインのパーシャルデザインの準備ができました。
メニューから新しいページデザインを作成するために、下記のメニューの項目をクリックします。
以下の様に名前を Demo Page とします。
ページで利用するパーシャルデザインを設定します。これまで作成してきた３つの Demo のパーシャルデザインを適用します。
設定後、保存をすることでページデザインの設定が完了します。
今回作成をしたメインのパーシャルデザインは、アイテムのタイトルとコンテンツを呼び出す形になっています。以下の様な情報を改めてアイテムに入力しておきます。
このアイテムのページを指定する項目が Designing の下に設定されており、今回作成をした Page Design が一覧に表示されています。
変更後、エクスペリエンスエディターで該当アイテムを開くと以下のようにみたまま編集が可能となっています。
今回はページデザインに関して紹介をしました。表示する順番の制御や、メインのエリアと組み合わせたパーシャルデザインをどういう形で設定することができるのか、も含めて確認をして、新しいデザインを作成しました。