ウォークスルー
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
レンダリングバリアントでは、同じレンダリングを異なる方法で表示できます。このウォークスルーでは、ページコンテンツレンダリング用のレンダリングバリアントを作成します。ページコンテンツレンダリングは、バリアントなしで単一のフィールドを表示するシンプルなレンダリングです(例えばページタイトルレンダリングなど)。バリアントを追加すると、コンテンツを表示するフィールドを動的に選択できます。
この例はブログ記事を表示するサイトを使います。バリアントフィールドの作成方法や、サイト内のすべてのブログ記事が同じスタイルで作られているかを学ぶことができます。
テンプレートを追加してください
この例は、ブログ記事用のフィールドを含むページテンプレートを持つシンプルなサイトを使います。
サイトにはいくつかのデータを含む様々なブログ記事が掲載されています。
テンプレートをテナントテンプレートフォルダに追加するには:
-
コンテンツエディターでtenant templatesフォルダ(sitecore/Templates/Project/)に移動します。例えば、新しいプロジェクトにカスタムテンプレートを追加するには、*/sitecore/templates/Project/*へ行ってください。
-
アイテムを右クリックして「挿入、新しいテンプレート」をクリックします。またはオプションセクションの「新しいテンプレート」をクリックしてください。
-
新しいテンプレートの名前を入力し、ベーステンプレートを選択し、「 次へ」をクリックします。ページを表すアイテムのテンプレートは、デフォルトのPageテンプレートから継承しなければなりません。
-
ビルダータブの「新しいセクションを追加」フィールドで、関連するデータテンプレートフィールドを追加します。例えば:
バリアントを作成する
現在の設定では、ページコンテンツレンダリングをページにドラッグすると、デフォルトで最初に見つけたバリアント、つまり コンテンツ フィールドが使われます。
他のフィールドを表示するためのページコンテンツバリアントを作成するには:
-
コンテンツエディターでPresentation/Rendering Variantsに移動し、右クリックで 「ページコンテンツ」をクリックし、「 挿入」→ 「バリアント定義」をクリックします。
-
Blog Postを入力してOKをクリックします。
-
レンダリングバリアントが表示するフィールドを定義するには、子項目をレンダリングバリアントに追加できます。バリアントを右クリックし、「 挿入」をクリックし、該当するアイテムをクリックします。
この例では、以下の項目を追加しましょう。
アイテム
名称
タグ
本文
フィールド
タイトル
H1
フィールド
著者
スパン
本文
著者プレフィックス
スパン
著者
日付
ウェブ出版
スパン
HTMLタグ
境界線
人事
フィールド
概要
H4
フィールド
リードイメージ
ディビジョン
フィールド
内容
ディビジョン
!注多くのフィールドを含む複雑な構造を持つバリアントをレンダリングする場合は、セクション内で構造化とスタイリングを検討してください。
Experience Editorでブログ投稿バリアントを選択すると、レンダリングバリアントに追加したフィールドが表示されます:
!注レンダリングアイテムにスタイリングを追加することも可能です。もしそうするなら、サイトで使うテーマがこのスタイリングを上書きする可能性があることに注意してください。
部分的なデザインを作成する
すべてのブログ記事のスタイル化には、部分デザインやページデザインを組み合わせることができます。部分的なデザインとは、レンダリングのセットや特定のバリエーションを用いたレンダリングのことです。
部分的なデザインを作成するには:
-
リボンのExperience Acceleratorタブで 「部分的なデザイン」をクリックし、「 新しい部分的なデザインを挿入する」をクリックしてください。
-
「 アイテム挿入 」ダイアログボックスで「部分設計」をクリックし、Blog Post Partialを入力して **「OK」**をクリックします。
-
次にページコンテンツレンダリングを部分的なデザインにドラッグし、ブログ投稿バリアントのあらかじめ定義されたスタイルを選択します。
ページデザインを作成しましょう
SXAのページデザインは、部分的なデザインとレンダリングの組み合わせです。ページデザインには部分的なデザインやレンダリングが含まれることもあります。この例のすべてのブログページが同じスタイリングを使うようにするために、ページデザインを作成できます。
ページデザインを作成するには:
-
リボンのExperience Acceleratorタブで 「Page Designs」をクリックし、「 Insert Page Design」をクリックしてください。
-
アイテム 挿入 ダイアログボックスで「 ページデザイン」をクリックし、「 Blog Post Design」を入力し、「 **OK」**をクリックします。
-
「アイテム選択」ダイアログボックスで、追加したい部分的なデザインを選択します。この例では、作成した**ヘッダー、**フッター、メタデータ、ブログ投稿部分を追加してください。右矢印をクリックして選択したアイテムのリストに移動し、その後「**確定」**をクリックします。
ページデザインを割り当てる
これで、すべてのブログページが同じスタイリングを使うようにページデザインを割り当てることができます。ページデザインを使ってコンテンツタイプをページレイアウトにマッピングできます。こうすることで、サイトのレイアウトを一貫性を保てます。
ページデザインを割り当てるには:
-
リボンのExperience Acceleratorタブで「 Site Page Designs」をクリックしてください。
-
表示されたダイアログボックスの左列でテンプレートを選択し、ページデザインに関連付けるために右欄でページデザインを選択します。
-
変更を適用するには、OKをクリックしてから保存をクリックします。