1. Sites

サイトテンプレートを作成する

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

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

SitecoreAIで基本的なコンテンツとプレゼンテーションを備えたサイトテンプレートを作成でき、サイト作成プロセスを簡素化できます。テンプレートには通常、共有デザインやブランド、連絡先情報、ナビゲーション、そして部分的にデザインされたページが含まれます。

この例では、スターターキットで環境を作成する際に含まれているBasic Siteテンプレートをコピーして、中小企業(SMB)のウェブサイト用のテンプレートを作成します。スターターキットの使用や既存のテンプレートのコピーが必ずしも必要というわけではありませんが、どちらの方法でもプロセスを加速させることができます。これらのオプションを使わなくても、このウォークスルーを使ってSitecoreAIサイトテンプレートの作成方法を理解でき、ニーズに合った手順を踏むことができます。

このウォークスルーでは、以下の方法を説明します:

  1. メディアライブラリへのメディアアップロード

  2. 分岐テンプレートを作成する

  3. 足場を作る

  4. PowerShellスクリプトを更新する

  5. サイトテンプレートのサムネイルを更新する

始める前に

  • 新しいサイトテンプレートで使用するバナーや背景画像などの画像ファイルを準備してください。

  • SITECORE_SPE_ELEVATION環境変数の値をAllowに設定します。これにより、サイトテンプレートのPowerShellスクリプトを編集できます。変更が適用されるように環境を再デプロイしてください。

  • Content EditorリボンのViewタブで、Standard fieldsチェックボックスが選択されていることを確認してください。

メディアライブラリへのメディアアップロード

まずは画像アセットをメディアライブラリにアップロードします。これらのアセットは、ヘッダーやフッターなどのページ要素や、テンプレート全体で再利用される背景画像、ロゴ、その他の画像として使います。また、新しいテンプレートに基づいてサイト管理者がサイトを作成する際に表示したいサムネイル画像もアップロードすることをおすすめします。

メディアライブラリに画像をアップロードするには:

  1. Content Editorで右クリックMedia Library/Feature/Headless Experience AcceleratorからInsert > Media folderをクリックします。

  2. 新しいフォルダの名前を入力してください。このテンプレートに必要なアイテムを作成する際にその名前を使用します。この例では、SMB siteと名付けます。

  3. メディアファイルをアップロードするには、Upload fileをクリックして1つのファイルをアップロードし、複数のファイルをアップロードするには複数のファイルをUpload files (advanced) できます。

  4. アクセシビリティの観点から、各画像をクリックしてAlt欄に説明文を入力することをお勧めします。

分岐テンプレートを作成する

ブランチテンプレートは 、サブアイテムの階層構造を持つアイテムを作成するためにコンテンツモデリングの一部として使用され、デフォルト値を含めることができます。この例では、基本サイトから既存のテンプレートをコピーしてブランチテンプレートを作成します。

分岐テンプレートの作成および変更:

  1. Content EditorでTemplates/Branches/Feature/Headless Experience Acceleratorフォルダを展開します。

  2. Basic Siteフォルダを右クリックして「Duplicate」をクリックします。

  3. 新しいフォルダの名前を入力してください。例えばSMB site。

  4. 新しいフォルダを展開し、About Data、Footer、Header、Home Data、Stylesが含まれていることを確認してください。

    New branch templates in the SMB site folder

  5. デフォルトのサイトの画像を、以前アップロードした関連する画像ファイルに置き換えてください。例えば、Home Data > Dataを展開し、Image 1をクリックしBrowse 、メディアライブラリから新しい画像を選択し、左上のSaveをクリックしてを展開します。

  6. 必要に応じて他のHome Data要素を修正してください。例えば、Show editorをクリックしてPromoLeftを変更したいテキストを入力するとします。

  7. 必要に応じて他の分岐テンプレートも変更してください: Header、Footer、About Data。

足場を作る

前のステップと同様に、basic site足場を複製して新しい足場を作ります。足場にはモジュールやアクションが含まれています。変更は左上の「Save」をクリックして頻繁に保存することを忘れないでください。

足場を作る方法:

  1. sitecore/System/Settings/Feature/Headless Experience Acceleratorへナビゲート。Basic Siteフォルダを右クリックしてDuplicateをクリックしてください。新しい足場フォルダーの名前を入力してください。例えばSMB site。

  2. 新しいSMB siteフォルダを展開し、Basic Site Setupアイテムをクリックします。

  3. 新しいサイトテンプレートの名前(例: SMB site setup)に合わせてアイテム名を変更し、Nameフィールドも変更してください。

    The site setup item in the new scaffolding for an XM Cloud site template

  4. コピーされたアクションはBasic Siteアクションと引き続き接続されています。それを変えるために:

    1. Add Aboutアクションをクリックします。

    2. 右側のSelectedリストのTemplateセクションには、基本サイトからコピーされたAbout Dataアイテムがあります。それをクリックしてから左矢印をクリックして削除してください。

    3. 左側のAllリストでTemplates/Branches/Feature/Headless Experience Acceleratorに移動し、新しいフォルダ名(例: SMB site)を展開します。

    4. About DataをダブルクリックしてSelectedリストに移動し、その後保存してください。

    5. 他のアクション(例:Footer分岐テンプレートのAdd Footer Partialアクションを選択するなど)も同じ手順を繰り返します。

  5. 新しいサイトテンプレートのスキャフォールディングフォルダ(例: SMB site)でTemplatesフォルダを開き、テンプレートを選択します。このテンプレートには、テンプレートに基づいて新しいサイトを作成する際にコンテンツ作成者がSitesダッシュボードで閲覧できる情報が含まれています。新しいサイトテンプレートに合わせて説明を更新してください(例: A site template for small and medium businesses)。

  6. 同じウィンドウのSite Modulesセクションの右側SelectedリストでBasic Site Setupを見つけて削除してください。

  7. 左側のAllリストでSettings/Feature/Headless Experience Acceleratorに移動し、新しいテンプレートフォルダを開きます(例: SMB site)。新しいセットアップアイテム(SMB Site Setup)をSelectedリストに移動させます。左上のSaveをクリックしてください。

    Selecting setup items for the new site template

  8. Contentフィールドには、JSON配列が、このテンプレートに基づいてサイトを作成する際にサイト管理者がSitesアプリケーションで何を見るかを定義しており、変更可能です。例えば、次の定義です:

    Content definition of a site template

    テンプレートに基づいてサイトを作成する際に、以下のコンテンツとして表示されます:

    List of elements included in a site template when creating a site based on the template

PowerShellスクリプトを更新する

このテンプレートは既存のテンプレートに基づいているため、PowerShellスクリプト内のアイテム名をContent Editorで指定した名前に合わせる必要があります。

PowerShellスクリプトを更新するには:

  1. まだContent Editorにいて、開いたsitecore/System/Modules/PowerShell/Script Library/JSS SXA。右クリックBasic SiteからDuplicateをクリックします。新しい文字の名前を入力してください。例えばSMB site。

  2. 新しいスクリプト> Functionsを展開し、Add Home Renderingsをクリックします。

    New PowerShell script for a site template in XM Cloud

  3. Scriptingセクションでスクリプト本文全体を選択してコピーし、Visual Studio Codeなどのコードエディタに貼り付けます。

  4. 参照コードSearch Basic Siteに置き換え、新しいサイトテンプレート名(例: SMB site)に置き換えます。編集したコードを選択してコピーし、Scriptingセクションに戻して古い内容を上書きします。

  5. 先ほど作成した新しいテンプレートフォルダ(例:SMB site)をOpen sitecore/System/Settings/Feature/Headless Experience Acceleratorして展開してください。新しいサイト設定を展開し、Add Home renderingsをクリックします。

  6. ScriptセクションのSelected列でAdd Home Renderingsを選択し、左矢印をクリックして削除してください。このレンダリングは基本的なサイトテンプレートに関連付けられています。

  7. ScriptセクションのAll列でJSS SXAを展開し、新しいサイトテンプレートスクリプトをFunctions。Add Home Renderingsを選択し、右矢印をクリックしてSelected列に移動します。

    Updating the Add Home Renderings script for the new site template in XM Cloud

サイトテンプレートのサムネイルを更新する

テンプレートに基づいてサイトを作成する管理者に表示するためのサムネイル画像を追加した場合、その画像をテンプレートに割り当てます。

サイトテンプレートのサムネイルを更新するには:

  1. 新しいサイトテンプレートフォルダをOpen sitecore/System/Settings/Feature/Headless Experience Acceleratorして展開します。

  2. Templatesを展開して新しいサイトテンプレートを選択してください。

  3. ContentエリアでスクロールしてAppearanceセクションを展開してください。メディアライブラリからサムネイルをアップロードしてください。

    Upload a thumbnail for your new XM Cloud site template

  4. 左上のSaveをクリックします。

新しいサイトテンプレートは準備でき、新しいサイトを作成するために使えます。テンプレートの編集を続けることができ、ベースページの追加、ヘッダーやフッターの編集、デザインの変更などが可能です。

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