基本テーマ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ベーステーマは、ウェブサイトのレイアウトをあらかじめ決めるプロトタイプテーマです。異なるデザイン哲学や特定の機能を支えるために、複数のベーステーマを持つことができます。
ベーステーマには、より複雑な機能を提供するスクリプトやスタイルが含まれています。例えば、Bing/Googleマップコネクタ、コアライブラリ(jquery、lo-dash)、編集体験に影響を与えるスクリプト(付箋、編集テーマ、ドラッグ&ドロップ、部分的なデザインハイライト)などの共有機能などです。
基本テーマはメディアライブラリに保存されています: /sitecore/Media Library/Base Themes。
分析
Analyticsベースのテーマは、あなたのサイト(Google Analytics)に分析スクリプトを追加します。これは テーマXA.jsに依存しています(XA APIテーマ)。
以下の文字体系が含まれています:
文字
概要
trackinginit.js
SXAの XAContext 変数にトラッキングメソッドを追加します。ドキュメント準備完了時にこの関数を呼び出すと、イベントがビデオコンポーネントのトラッキングを初期化します。
tracking.js
Google Analyticsスクリプトを追加します。この関数をドキュメント準備時に呼び出すと、これらのスクリプトを実行するためのメソッドやセットアップが保存されます。
trackingmovie.js
SXAのXAContext変数にTracking.Moviesメソッドを追加します。MEJや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 Connectorテーマを追加してください。これはテーマ(XA APIテーマ)によってXA.js(the-base-themes.html#UUID-93e17ae5-049f-6689-7200-ec6dc1405fa7_N1558513605695 "XA API") に依存します。
以下の文字が含まれています。
- bing-maps-connector.js - Bingマップの機能を注入します。
GoogleマップJSコネクタ
Googleマップを使うなら、Google MapsのJSコネクタテーマを追加してください。これはテーマ(XA APIテーマ)によってXA.js(the-base-themes.html#UUID-93e17ae5-049f-6689-7200-ec6dc1405fa7_N1558513605695 "XA API") に依存します。
以下の文字が含まれています。
- google-maps-connector.js - Googleマップの機能を導入します。
グリッド
Gridテーマはコンテンツ編集時に使われます。グリッドで隠れているコンポーネントを表示でき、以下のスクリプトが含まれています:
- gridhiddencomponents.js – グリッドで隠れている部品の表示または非表示。
グリッドテーマには以下のスタイルが含まれます:
- gridhiddencompontents.css
JSON
JSONテーマは、現在のデバイスがJSONを選択する際に使われます。マークアップやスタイルを追加してJSONを強調表示し、以下のスクリプトが含まれています:
- jsonhighlighter.js - JSONをより読みやすくするための書式化と構文のハイライト。
JSONテーマには以下のスタイルが含まれます:
- prism.css – JSON ハイライト用のスタイル
- Json.css – JSONページのデフォルトスタイルを設定します
メインテーマ
メインテーマにはプラットフォームの一部であるスクリプトやスタイルが含まれています(レンダリングスクリプトを除く)。メインテーマはコアライブラリのテーマに依存しているため、継承する場合はまずコアライブラリからも継承しなければなりません。メインテーマはXA.js(the-base-themes.html#UUID-93e17ae5-049f-6689-7200-ec6dc1405fa7_N1558513605695 "XA API") (XA APIテーマ)に依存します。
メインテーマには以下のスクリプトが含まれています。
文字
概要
observer.js
Chromeのリセットで XA.init メソッドを呼び出します。
partial-design-highlight.js
編集モードでドロップダウンメニューから異なるデザインにカーソルを合わせると、部分的なデザインが表示されます。
メインテーマには以下のスタイルが含まれます:
スタイル
概要
core.css
グリッド固有の修正。
file-type-icon.css
拡張アイコンのスタイル。
grayscale-mode.css
グレースケールモードのスタイル。
reset.css
デフォルトのブラウザスタイルをリセットしてください。
地図
XA.js(the-base-themes.html#UUID-93e17ae5-049f-6689-7200-ec6dc1405fa7_N1558513605695 "XA API")でMaps.Dependentスクリプト(XA APIテーマ)を使う場合は、必ずMapsテーマを使わなければなりません。
マップのテーマには以下のスタイルが含まれます:
- component-location-service.js – 地図コンポーネントの位置情報サービス。
メタ部分設計
Meta partial designテーマは、meta partial designsのスクリプトやスタイルを保存します。
以下の文字体系が含まれています:
- beautify-html.js – はHTMLのビューティファイアメソッドを呼び出します。
- meta-partial-design.js – メタ部分設計ビューですべてのコンポーネントを選択し、beautifyメソッドを呼び出します。
以下のスタイルを含みます。
- meta-styles.css - メタ部分デザインページのスタイル。
Searchテーマ
Searchテーマには、それぞれの検索コンポーネントごとにjsロジックが含まれています。
付箋
付箋テーマは編集モードで付箋を追加できる機能を提供します。
以下の文字が含まれています。
- stickynotes.js - 粘着ノード機能のためのJSロジック
以下のスタイルを含みます。
- stickynotes.css - スティッキーノード機能用のスタイル
バリエーション
Variantsテーマは、編集モードのコンポーネントのレンダリングバリアントを変更することを可能にします。
以下の文字が含まれています。
- 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 ライブラリです。
ローダッシュ
ローダッシュライブラリが追加されます。
modernizr.js
Modernisrライブラリが追加されます。
galleria-157.js
さらにガレリア図書館も追加されます。
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
フォントの素晴らしいライブラリのためのスタイル。
mejs-controls.css
MEJのコントロール要素のスタイル。
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でデータコンテキストを返すメソッドがあります。
ポップアップゲッコー toolbox.js
ゲッコ用のscBrowserを拡張しました。
編集テーマには以下のスタイルが含まれています:
スタイル
概要
edit-here-hint.css
ここで「ここで編集」の動作を修正します。
sx82fonts.css
GoogleからSansフォントをエクスポートします。
toolbox.css
SXAツールボックスのスタイル。
xamover.css
ドラッグ&ドロップ機能のためのスタイル。
partialdesignhighlight.css
部分的なデザインのプレースホルダーをハイライトしてください。
編集コンポーネント
編集コンポーネントの基本テーマは、編集モードで特別な動作を持つコンポーネントのロジックを保存します。
編集コンポーネントのテーマには以下のスクリプトが含まれています:
文字
概要
component-accordion-edit.js
編集モードのアコーディオンコンポーネントのロジック。
component-tabs-edit.js
編集モードでタブコンポーネントのロジック。
component-galleria-edit.js
編集モードのガレリアコンポーネントのロジック。
component-overlay-edit.js
編集モードでのオーバーレイコンポーネントのロジック。
component-carousel-edit.js
編集モード中のカルーセルコンポーネントのロジック。
component-flip-edit.js
編集モードのフリップコンポーネントのロジック。
component-snippet-edit.js
編集モードでのスニペットコンポーネントのロジック。
紛争解決
Resolve conflictsテーマは、コンテンツエディターのウィンドウ内でExperience Editorを開くと衝突を解決します。
Resolveの対立テーマには以下のスクリプトが含まれています。
- Resolveconflicts.js - S JQuery と prototype.js間の対立を解決する。
コンポーネントテーマ
コンポーネントテーマは、すべてのSXAコンポーネントのjsロジックを格納します:
