1. レンダリングバリアント

チュートリアル: ブログ記事のレンダリング バリアントの作成

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

レンダリング バリアントを使用すると、同じレンダリングを異なる方法で表示できます。このチュートリアルでは、ページ コンテンツ レンダリングのレンダリング バリアントを作成します。ページコンテンツレンダリングは、バリアントなしで単一のフィールドを表示する単純なレンダリングです(たとえば、ページタイトルレンダリングなど)。バリアントを追加すると、コンテンツを表示するフィールドを動的に選択できます。

この例では、ブログの投稿を表示するサイトを使用します。バリアントフィールドを作成する方法と、サイト内のすべてのブログ投稿が同じ方法でスタイル設定されていることを確認する方法を学習します。

テンプレートを追加する

この例では、ブログ投稿のフィールドを含むページ テンプレートを持つ単純なサイトを使用します。

Page template blog post example.

このサイトには、いくつかのデータを含むさまざまなブログ投稿が含まれています。

Blog pages example.

テンプレートをテナント テンプレート フォルダーに追加するには:

  1. コンテンツ エディターで、テナント テンプレート フォルダー (sitecore/Templates/Project/) に移動します。たとえば、新しいプロジェクトにカスタムテンプレートを追加するには、/sitecore/templates/Project/<projectname>に移動します。

  2. アイテムを右クリックし、Insert、New Templateの順にクリックします。または、OptionsセクションのNew Templateをクリックします。

  3. 新しいテンプレートの名前を入力し、基本テンプレートを選択して、「 Next」をクリックします。ページを表すアイテムのテンプレートは、デフォルトのPageテンプレートから継承する必要があります。

  4. BuilderタブのAdd a new sectionフィールドに、関連するデータ テンプレート フィールドを追加します。例えば：

    Date template fields example.

バリアントを作成する

現在の設定では、ページコンテンツレンダリングをページにドラッグすると、デフォルトでは、最初に見つかったバリアント(この場合はContentフィールド)がレンダリングで使用されます。

The rendering uses the first found variant

他のフィールドを表示するページコンテンツバリアントを作成するには:

  1. コンテンツ エディタでPresentation/Rendering Variantsに移動し、Page Contentを右クリックして、Insert 、Variant Definitionの順にクリックします。

  2. Blog Postと入力し、OKをクリックします。

  3. レンダリング バリアントが表示するフィールドを定義するには、レンダリング バリアントに子アイテムを追加します。バリアントを右クリックし、Insertをクリックして、関連する項目をクリックします。

    この例では、次の項目を追加しましょう。

    アイテム

    名前

    タグ

    テキスト

    畑

    タイトル

    H1の

    畑

    著者

    全長

    テキスト

    著者のプレフィックス

    全長

    著者

    日付

    ウェブパブリケーション

    全長

    HTMLタグ

    境界線

    人事

    畑

    概要

    H4

    畑

    リードイメージ

    ディビジョン

    畑

    コンテンツ

    ディビジョン

    メモ

    多くのフィールドを含む複雑な構造を持つバリアントをレンダリングする場合は、セクションでそれらを構造化してスタイル設定することを検討してください。

    エクスペリエンス エディターで ブログ投稿 バリアントを選択すると、レンダリング バリアントに追加したフィールドが表示されます。

    手記

    レンダリングアイテムにスタイルを追加することもできます。これを行う場合は、サイトで使用するテーマによってこのスタイルが上書きされる可能性があることに注意してください。

パーシャルデザインの作成

すべてのブログ投稿のスタイルを設定するには、パーシャル デザインとページ デザインを使用します。パーシャル デザインとは、レンダリングのセット、または再利用可能な特定のバリアントを使用したレンダリングです。

パーシャルデザインを作成するには:

  1. リボンのExperience Acceleratorタブで、Partial Designをクリックし、Insert a new Partial Designをクリックします。

  2. Insert Itemダイアログボックスで、「Partial Design」をクリックし、「Blog Post Partial」と入力して「OK」をクリックします。

  3. 次に、ページコンテンツのレンダリングをパーシャルデザインにドラッグし、ブログ投稿バリアントの定義済みスタイルを選択します。

ページデザインを作成する

SXAのページ デザインは、パーシャル デザインとレンダリングの選択です。ページ デザインには、パーシャル デザインとレンダリングを含めることができます。この例のすべてのブログ ページで同じスタイルが使用されるように、ページ デザインを作成できます。

ページデザインを作成するには:

  1. リボンのExperience Acceleratorタブで、Page Designsをクリックし、Insert Page Designをクリックします。

  2. Insert Itemダイアログボックスで、「Page Design」をクリックし、「Blog Post Design」と入力して、「OK」をクリックします。

  3. Select itemsダイアログボックスで、追加するパーシャルデザインを選択します。この例では、作成したHeader、Footer、Metadata、Blog Post Partialを追加します。右矢印をクリックして選択したアイテムのリストに移動し、OKをクリックします。

ページデザインの割り当て

これで、ページデザインを割り当てることで、すべてのブログページが同じスタイルを使用していることを確認できます。ページデザインを使用して、コンテンツタイプをページレイアウトにマッピングできます。これにより、サイトのレイアウトの一貫性を保つことができます。

ページデザインを割り当てるには:

  1. リボンのExperience Acceleratorタブで、Site Page Designsをクリックします。

  2. 表示されるダイアログボックスの左側の列でテンプレートを選択し、それをページデザインに関連付けるには、右側の列でページデザインを選択します。

  3. 変更を適用するには、「 OK 」をクリックし、「Save」をクリックします。

この記事を改善するための提案がある場合は、 お知らせください!