基本テーマ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ベーステーマは、Webサイトのレイアウトを事前に決定するプロトタイプテーマです。さまざまな設計哲学や特定の機能をサポートするために、いくつかの基本テーマを持つことができます。
ベーステーマには、より複雑な機能を提供するスクリプトとスタイルが含まれています。たとえば、Bing/Googleマップ コネクタ、コア ライブラリ (jquery、lo-dash)、編集エクスペリエンスに影響を与えるスクリプト (付箋、編集テーマ、ドラッグ アンド ドロップ、パーシャル デザインの強調表示) などの共有機能などです。
基本テーマは、メディアライブラリに保存されます。 /sitecore/Media Library/Base Themes。
解析学
アナリティクスの基本テーマは、サイトの分析スクリプトを追加します(Googleアナリティクス)。 これはXA.js (XA APIテーマ)に依存します。
これには、次のスクリプトが含まれています。
|
スクリプト |
形容 |
|---|---|
|
trackinginit.js |
SXAのXAContext変数に追跡方法を追加します。ドキュメントの準備ができてこの関数を呼び出した後、イベントによってビデオ コンポーネントの追跡が初期化されます。 |
|
tracking.js |
Googleアナリティクス スクリプトを追加します。ドキュメントの準備ができたときにこの関数を呼び出した後、これらのスクリプトを実行するためのメソッドとセットアップが格納されます。 |
|
trackingmovie.js |
Tracking.MoviesメソッドをSXAのXAContext変数に追加します。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 Maps JSコネクタ
Bingマップを使用する場合は、Bing Maps JSコネクタ テーマを追加します。これは、XA.js (XA APIテーマ) によって異なります。
これには、次のスクリプトが含まれています。
-
bing-maps-connector.js - Bingマップの機能を挿入します。
Google Maps JSコネクタ
Googleマップを使用する場合は、Google Maps JS Connectorテーマを追加します。これは、XA.js (XA APIテーマ) によって異なります。
これには、次のスクリプトが含まれています。
-
google-maps-connector.js - Googleマップの機能を挿入します。
グリッド
グリッド テーマは、コンテンツの編集中に使用されます。グリッドによって非表示になっているコンポーネントを表示でき、次のスクリプトが含まれています。
-
gridhiddencomponents.js – グリッドによって非表示になっているコンポーネントを表示または非表示にします。
グリッド テーマには、次のスタイルが含まれています。
-
gridhiddencompontents.css
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スクリプトを使用する場合は、Mapsテーマを使用する必要があります。
マップテーマには、次のスタイルが含まれています。
-
component-location-service.js – マップコンポーネントの位置情報サービス。
メタパーシャルデザイン
メタパーシャルデザインテーマには、メタパーシャルデザインのスクリプトとスタイルが格納されます。
これには、次のスクリプトが含まれています。
-
beautify-html.js – HTMLのbeautifierメソッドを呼び出します。
-
meta-partial-design.js – Meta Partial Design Viewですべてのコンポーネントを選択し、beautifyメソッドを呼び出します。
これには、次のスタイルが含まれます。
-
meta-styles.css - メタパーシャルデザインページのスタイル。
Searchテーマ
Searchテーマには、個別の検索コンポーネントごとに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ライブラリを追加します。 |
|
modernizr.js |
modernizrライブラリを追加します。 |
|
galleria-157.js |
galleriaライブラリを追加します。 |
|
fullcalendar.js |
完全なカレンダーライブラリを追加します。 |
|
gcal.js |
Googleカレンダーを追加します。 |
|
jqueryuitouch-punchmin.js |
jQuery UIのタッチイベントを追加します。 |
|
hammer.js |
hammerjsライブラリを追加します。 |
|
backbone-min.js |
検索コンポーネントとマップコンポーネントで使用されます。 |
|
typeahead.js |
検索コンポーネントで使用されます。 |
|
jquerymCustomScrollbar.js |
SXAツールボックスのカスタム スクロールバーを追加します。 |
|
flash-polyfill.js |
フラッシュ コンポーネントのポリフィルを追加します。 |
|
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。 |
|
ポップアップGecko toolbox.js |
scBrowser for Geckoを拡張します。 |
編集テーマには、次のスタイルが含まれています。
|
スタイル |
形容 |
|---|---|
|
edit-here-hint.css |
edit-here-hint要素の動作を修正しました。 |
|
sx82fonts.css |
Googleから開いているSansフォントをエクスポートします。 |
|
toolbox.css |
SXAツールボックスのスタイル。 |
|
xamover.css |
ドラッグ アンド ドロップ機能のスタイル。 |
|
partialdesignhighlight.css |
パーシャル デザインのプレースホルダーを強調表示します。 |
コンポーネントの編集
編集コンポーネントの基本テーマには、編集モードで特別な動作をするコンポーネントのロジックが格納されます。
Editing Componentsテーマには、次のスクリプトが含まれています。
|
スクリプト |
形容 |
|---|---|
|
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ロジックが格納されます。
