SXAのテーマ

ベーステーマは、Webサイトのレイアウトを事前に決定するプロトタイプテーマです。さまざまな設計哲学や特定の機能をサポートするために、いくつかの基本テーマを持つことができます。

基本テーマのProtected Themeチェックボックスを選択したままにします。「Protected Theme」チェックボックスをオンにすると、テーマはSitecore.XA.Feature.CreativeExchange.configの <restrictedLocations> 設定に追加され、Creative Exchangeを使用して再度インポートしたときにCSS/JSへの変更は反映されません。

基本テーマはメディアライブラリに保存されます。 /sitecore/Media Library/Base Themes.

Base Themesフォルダには、たとえば次のものが含まれます。

サイト テーマは基本テーマの拡張であり、特定のサイトに適用できます。通常、サイト テーマは基本テーマに依存しており、サイトで使用されるすべてのレンダリングのスクリプトとスタイルが含まれています。

テーマは、サイトごとに選択できるアセット(スタイルシート、スクリプト、画像)のセットです。デフォルトでは、テーマにはフォント、画像、スクリプト、およびスタイルのフォルダが含まれています。

Asset Optimizerは、サイトテーマの スクリプト フォルダと スタイル フォルダを使用して、ページリクエスト中の帯域幅を節約するために、縮小されたソースコード (optimized.min.jsとoptimized.min.css) を準備します。

アセットオプティマイザーを無効にした場合は、optimized.minファイルの代わりに、メディアライブラリから圧縮されていないスクリプトが表示されます。

サイトのテーマには、サイトのブランディングを提供するために使用されるCSSスタイル、テーマ画像、JavaScriptライブラリが含まれています。サイトのテーマには、多くの場合、CSSスタイルの生成に使用されるSassソース、コンパス設定が含まれています。この場合、フロントエンド開発者はCSSファイルを直接変更するのではなく、Sassワークフロー内で作業する必要があります。

テーマ内のCSSファイルとJavaScriptファイルは、一度に1つのレンダリングを処理するチャンクに分割されています。

各サイト テーマについて、基本テーマを選択して、テーマの基本的な特性とプロパティを定義する必要があります。すべてのテーマにはグリッドテーマも必要です。SXAテーマは多重継承をサポートしています。つまり、すべてのテーマに対して複数の親テーマを定義できます。たとえば、次の例では、Holidayテーマは他のいくつかのテーマから継承されます。

選択した基本テーマの順序は重要です。新しいテーマを追加したり、順序を変更したりするときは注意してください。たとえば、SearchThemeがコア ライブラリにあるjqueryライブラリに依存している場合は、SearchThemeが他のテーマの後に読み込まれるようにする必要があります。

SXAには、サイトをすばやく設定するのに役立つワイヤーフレームという名前のデフォルトのサイト テーマが付属しています。サイトはワイヤーフレームテーマを使用してまとめることができますが、その間、基本テーマはCreative Exchangeを使用してクリエイティブエージェンシーに送信されます。ワイヤーフレームテーマは、フロントエンド開発者が準備した後でサイトテーマと交換できます。

イメージプレースホルダーにモックイメージを使用する場合は、ワイヤフレームイメージセクションに移動し、次のフィールドに入力します。

Creative Exchange Liveで作業するには、Basic2テーマが必要です。Creative Exchange Liveは、フロントエンド開発者がファイルをサイトにインポートし直さなくても、テーマやその他のサイト コンテンツを変更できるようにするSXA機能です。Basic2テーマを使用すると、gulpで作業できます。