ベース テーマ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ベース テーマは、Web サイトのレイアウトをあらかじめ決定するプロトタイプのテーマです。さまざまなデザインの考え方や特定の機能をサポートするために、いくつかのベース テーマを設定できます。
ベース テーマには、より複雑な機能を提供するスクリプトとスタイルが含まれています。たとえば、Bing 地図/Google マップ コネクタ、コア ライブラリ (jquery、lo-dash)、編集エクスペリエンスに影響を与えるスクリプト (付箋、編集テーマ、ドラッグ アンド ドロップ、パーシャル デザインの強調表示) などの共通機能があります。
ベース テーマは、メディア ライブラリの /sitecore/メディア ライブラリ/Base Themes に保存されます。
アナリティクス
アナリティクス ベース テーマは、サイトの分析スクリプト (Google アナリティクス) を追加します。これは、XA.js (XA API テーマ) に依存しています。
これには、以下のスクリプトが含まれています。
|
スクリプト |
説明 |
|---|---|
|
trackinginit.js |
SXA の |
|
tracking.js |
Google アナリティクスのスクリプトを追加します。ドキュメントの準備ができてからこの関数を呼び出すと、それらのスクリプトを実行するためのメソッドと設定が保存されます。 |
|
trackingmovie.js |
SXA の |
|
trackingmoviesplayer.js |
動画プレーヤーのメソッドを記述します。 |
|
trackingmoviesplayermanager.js |
SXA の |
|
trackingmoviesyoutubeplayer.js |
SXA の |
|
trackingmoviesyoutubeplayerhandlers.js |
SXA の |
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 のリセット時に |
|
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 ロジックが含まれています。
付箋
付箋テーマを使用すると、編集モードで付箋を追加することができます。
これには、以下のスクリプトが含まれています。
-
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 を初期化し、それらを |
|
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:JQueryとprototype.jsの間の競合を解決します。
コンポーネント テーマ
コンポーネント テーマは、SXA のすべてのコンポーネントの js ロジックを保存します。
