ベース テーマ

Current version: 10.1

ベース テーマは、Web サイトのレイアウトをあらかじめ決定するプロトタイプのテーマです。さまざまなデザインの考え方や特定の機能をサポートするために、いくつかのベース テーマを設定できます。

ベース テーマには、より複雑な機能を提供するスクリプトとスタイルが含まれています。たとえば、Bing 地図/Google マップ コネクタ、コア ライブラリ (jquery、lo-dash)、編集エクスペリエンスに影響を与えるスクリプト (付箋、編集テーマ、ドラッグ アンド ドロップ、パーシャル デザインの強調表示) などの共通機能があります。

ベース テーマは、メディア ライブラリの /sitecore/メディア ライブラリ/Base Themes に保存されます。

アナリティクス

アナリティクス ベース テーマは、サイトの分析スクリプト (Google アナリティクス) を追加します。これは、XA.js (XA API テーマ) に依存しています。

これには、以下のスクリプトが含まれています。

スクリプト

説明

trackinginit.js

SXA の XAContext 変数に追跡方法を追加します。ドキュメントの準備ができてからこの関数を呼び出すと、イベントによって動画コンポーネントの追跡が初期化されます。

tracking.js

Google アナリティクスのスクリプトを追加します。ドキュメントの準備ができてからこの関数を呼び出すと、それらのスクリプトを実行するためのメソッドと設定が保存されます。

trackingmovie.js

SXA の XAContext 変数に Tracking.Movies メソッドを追加します。mejs および YouTube プレーヤーの分析のメソッドを保存します。

trackingmoviesplayer.js

動画プレーヤーのメソッドを記述します。trackmoviesmejsplayer.js で使用されます。

trackingmoviesplayermanager.js

SXA の XAContext 変数を Tracking.Movies.PlayerManager スクリプトで拡張して、動画プレーヤーのメソッドを保存します。

trackingmoviesyoutubeplayer.js

SXA のXAContext 変数を Tracking.Movies.YouTubePlayer スクリプトで拡張します。YouTube プレーヤーのメソッドのリストを保存します。

trackingmoviesyoutubeplayerhandlers.js

SXA のXAContext 変数を Tracking.Movies.YouTubePlayer.Handlers で拡張します。YouTube プレーヤーのハンドラーを保存します。

Bing 地図 JS コネクタ

Bing 地図を使用する場合は、Bing 地図 JS コネクタ テーマを追加します。これは、XA.js (XA API テーマ) に依存しています。

これには、以下のスクリプトが含まれています。

  • bing-maps-connector.js: Bing 地図の機能を挿入します。

Google マップ JS コネクタ

Google マップを使用する場合は、Google マップ JS コネクタ テーマを追加します。これは、XA.js (XA API テーマ) に依存しています。

これには、以下のスクリプトが含まれています。

  • google-maps-connector.js: Google マップの機能を挿入します。

グリッド

グリッド テーマは、コンテンツの編集時に使用します。グリッド テーマを使用すると、グリッドで非表示になっているコンポーネントを表示できます。グリッド テーマには、以下のスクリプトが含まれています。

  • gridhiddencomponents.js: グリッドで非表示になっているコンポーネントを表示したり、非表示にしたりします。

グリッド テーマには、以下のスタイルが含まれています。

  • gridhiddencompontents.css

JSON

JSON テーマは、現在のデバイスで JSON を選択するときに使用します。JSON テーマは、マークアップとスタイルを追加して JSON を強調表示します。JSON テーマには、以下のスクリプトが含まれています。

  • jsonhighlighter.js: JSON を読みやすくするための書式と構文の強調表示。

JSON テーマには、以下のスタイルが含まれています。

  • prism.css: JSON を強調表示するためのスタイル。

  • Json.css: JSON ページのデフォルトのスタイルを設定します。

メイン テーマ

メイン テーマには、プラットフォームのパーツであるスクリプトとスタイルが含まれています (レンダリングのスクリプトを除く)。メイン テーマはコア ライブラリ テーマに依存しているため、メイン テーマから継承する場合はまずコア ライブラリからも継承する必要があります。これは、XA.js (XA API テーマ) に依存しています。

メイン テーマには、以下のスクリプトが含まれています。

スクリプト

説明

observer.js

Chrome のリセット時に XA.init メソッドを呼び出します。

partial-design-highlight.js

編集モードでドロップダウン メニューからさまざまなデザインにカーソルを合わせたときにパーシャル デザインを強調表示します。

メイン テーマには、以下のスタイルが含まれています。

スタイル

説明

core.css

グリッド固有の修正。

file-type-icon.css

拡張アイコンのスタイル。

grayscale-mode.css

グレー スケール モードのスタイル。

reset.css

デフォルトのブラウザーのスタイルにリセットします。

マップ

XA.js (XA API テーマ) で Maps.Dependent スクリプトを使用する場合は、マップ テーマを使用する必要があります。

マップ テーマには、以下のスタイルが含まれています。

  • component-location-service.js: マップ コンポーネントの位置情報サービス。

メタ パーシャル デザイン

メタ パーシャル デザイン テーマは、メタ パーシャル デザインのスクリプトとスタイルを保存します。

これには、以下のスクリプトが含まれています。

  • beautify-html.js: html の beautifier メソッドを呼び出します。

  • meta-partial-design.js: メタ パーシャル デザイン ビューのすべてのコンポーネントを選択して、beautify メソッドを呼び出します。

これには、以下のスタイルが含まれています。

  • meta-styles.css: メタ パーシャル デザイン ページのスタイル。

検索テーマ

検索テーマには、個別の検索コンポーネントごとの js ロジックが含まれています。

検索テーマの js ロジック

付箋

付箋テーマを使用すると、編集モードで付箋を追加することができます。

これには、以下のスクリプトが含まれています。

  • stickynotes.js: 付箋機能の js ロジック

これには、以下のスタイルが含まれています。

  • stickynotes.css: 付箋機能のスタイル

バリアント

バリアント テーマを使用すると、編集モードでコンポーネントのレンダリングのバリアントを変更することができます。

これには、以下のスクリプトが含まれています。

  • variantswitcher.js: エクスペリエンス エディターでレンダリングのバリアントを変更する機能を提供します。

XA API

XA API テーマは、コンポーネントを登録します。

これには、以下のスクリプトが含まれています。

  • xa.js: コンポーネントと追加のヘルパーを操作するためのメソッドを含む特別な SXA オブジェクトを挿入します。

コア ライブラリ

コア ライブラリ テーマには、jquery、jquery UI、lo-dash、mediaelement、modernizr などのプロジェクトで使用するサードパーティのライブラリが含まれています。

コア ライブラリ テーマには、以下のスクリプトが含まれています。

スクリプト

説明

Ie-origin-fix.js

IE で location.origin を使用するための修正を追加します。

xaquery.js

jQuery と jQuery UI を初期化し、それらを window.$xa にプットします。

moment.js

日付/時刻機能を操作する momentjs.com のライブラリ。

lo-dash

lo-dash ライブラリを追加します。

modernizr.js

modernizr ライブラリを追加します。

galleria-157.js

galleria ライブラリを追加します。

fullcalendar.js

FullCalendar ライブラリを追加します。

gcal.js

Google カレンダーを追加します。

jqueryuitouch-punchmin.js

jQuery UI のタッチ イベントを追加します。

hammer.js

hammerjs ライブラリを追加します。

backbone-min.js

検索コンポーネントとマップ コンポーネントで使用されます。

typeahead.js

検索コンポーネントで使用されます。

jquerymCustomScrollbar.js

SXA のツールボックスのカスタム スクロールバーを追加します。

flash-polyfill.js

Flash コンポーネントの polyfill を追加します。

mediaelement-and-player.js

動画コンポーネントのライブラリを追加します。

facebook.js

Facebook の動画のコネクタを追加します。

soundcloud.js

SoundCloud のコネクタを追加します。

twitch.js

Twitch のコネクタを追加します。

vimeo.js

Vimeo のコネクタを追加します。

コア ライブラリ テーマには、以下のスタイルが含まれています。

スタイル

説明

mediaelementplayer.css

メディア要素のスタイル。

mediaelementplayer-legacy.css

メディア要素の従来のスタイル。

font-awesomemin.css

font-awesome ライブラリのスタイル。

mejs-controls.css

mejs コントロール要素のスタイル。

fullcalendar.css

カレンダー コンポーネントのスタイル。

querymCustomScrollbar.css

(SXA のツールボックスの) カスタム スクロールバーのスタイル。

jquery-ui.css

jquery UI コンポーネントのスタイル。

編集テーマ

編集テーマは、エクスペリエンス エディターでコンポーネントを編集するために使用するロジックを追加します。

編集テーマには、以下のスクリプトが含まれています。

スクリプト

説明

xamover.js

ヘルパーをドラッグ アンド ドロップします。プレースホルダーの操作に役立つメソッドを提供します。

initializer.js

xamover 機能を初期化します。

draganddrop.js

SXA のドラッグ アンド ドロップ機能。

gridlines.js

グリッドの列の視覚化。

toolbox.js

SXA のツールボックスのロジック。

treeview.js

データのコンテキストを返すメソッドで Sitecore.Treeview を拡張します。

popupsGecko toolbox.js

Gecko の scBrowser を拡張します。

編集テーマには、以下のスタイルが含まれています。

スタイル

説明

edit-here-hint.css

edit-here-hint 要素の動作を修正します。

sx82fonts.css

Google から Open Sans フォントをエクスポートします。

toolbox.css

SXA のツールボックスのスタイル。

xamover.css

ドラッグ アンド ドロップ機能のスタイル。

partialdesignhighlight.css

パーシャル デザインのプレースホルダーを強調表示します。

編集コンポーネント

編集コンポーネント ベース テーマには、編集モードで特別な動作をするコンポーネントのロジックが保存されています。

編集コンポーネントには、以下のスクリプトが含まれています。

スクリプト

説明

component-accordion-edit.js

編集モードのアコーディオン コンポーネントのロジック。

component-tabs-edit.js

編集モードのタブ コンポーネントのロジック。

component-galleria-edit.js

編集モードの galleria コンポーネントのロジック。

component-overlay-edit.js

編集モードのオーバーレイ コンポーネントのロジック。

component-carousel-edit.js

編集モードのカルーセル コンポーネントのロジック。

component-flip-edit.js

編集モードのフリップ コンポーネントのロジック。

component-snippet-edit.js

編集モードのスニペット コンポーネントのロジック。

競合の解決

競合の解決テーマは、コンテンツ エディター ウィンドウでエクスペリエンス エディターを開いたときに競合を解決します。

競合の解決テーマには、以下のスクリプトが含まれています。

  • Resolveconflicts.js: JQueryprototype.js の間の競合を解決します。

コンポーネント テーマ

コンポーネント テーマは、SXA のすべてのコンポーネントの js ロジックを保存します。

Do you have some feedback for us?

If you have suggestions for improving this article,