1. スタイルとスクリプト

ページとレンダリングのHTML構造

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXAは、構造 (HTML) とデザイン (CSS) を分離して、Webサイトのデザインを簡単に変更できるようにします。これを可能にするために、SXAは、すべてのページで同じ、安定した構造化されたHTMLコードを提供します。ユーザーは、基になるコードを変更せずに、さまざまなスタイルを適用できます。

ページHTML

すべてのSXAページは、次のレイアウト構造を使用します。

<html>
<head>
  <!-- meta renderings placeholder "head" -->
</head>
<body>
  <!-- meta renderings placeholder "body-top" -->
  <div id="wrapper">
    <div id="header" class="main clearfix">
      <!-- header components -->
    </div>
    <div id="content" class="main clearfix">
      <!-- content components -->
    </div>
    <div id="footer" class="main clearfix">
      <!-- footer components -->
    </div>
  </div>
  <!-- meta renderings placeholder "body-bottom" -->
</body>

すべての通常のレンダリングは、次のコンテナに配置できます。

  • ヘッダ

  • コンテンツ

  • フッター

メタレンダリングは、次のコンテナ内のメタパーシャルデザインに配置できます。

  • 頭

  • ボディトップ

  • ボディボトム

デザイナーは、ページスプリッターを使用して、ヘッダー、コンテンツ、またはフッター コンテナー内に追加の列または行を生成できます。

スプリッターには2つのタイプがあります。

  • 列スプリッター – 行コンテナでラップされた適切なグリッドクラスを持つdivsを生成します。グリッド値は、列の幅を指定します。

    <div class='row'>
  <div class='grid-6'></div>
  <div class='grid-6'></div>
</div>

  • 行スプリッター – 使用可能な親コンテナーの全幅を埋める空のrow divsを生成します。

    <div class='row'></div>
<div class='row'></div>
<div class='row'></div>

列と行の両方にクラスを追加できます。また、特定のスプリッターセクションをマークし、他のセクションとは異なるスタイルを設定することもできます。これは、グリッド システムを壊すページ パーツのスタイルを設定する場合に便利です。ただし、グリッドの動作を上書きできるのは、特定の行のみです。

HTMLのレンダリング

すべてのSXAレンダリングは、簡単にスタイル設定できるように設計されています。HTMLは非常に標準的であるため、テーマ開発者はCSSとJavaScriptを簡単に適用できます。

次の例では、アコーディオンレンダリングを使用しています。レンダリングのHTML構造は、コンポーネント クラスとコンポーネント名アコーディオンでdivでラップされます。スタイル設定のためにCSSクラスバリアントを追加できます。

<div class="component accordion {custom classes}" data-properties='{"expandOnHover":false,"expandedByDefault":false,"speed":5000,
"easing":"easeInOutBounce","canOpenMultiple":false,"canToggle":false}'
>
  <div class="component-content">
    <div>
      <ul class="items">
        <li class="item">
          <div class="toggle-header">
            <div class="label">
              Header content
            </div>
          </div>
          <div class="toggle-content">
              Section content
          </div>
        </li>       </ul>
    </div>
  </div>
</div>
メモ

スタイル設定にはクラスを使用します。IDは使用しないでください。Div IDはSitecoreで使用され、変更することはできません。

次のプロパティは、レンダリング動作を制御するためにJavaScriptによって使用されます。

  • expandedByDefault –最初のアコーディオンタブが表示されます。

  • expandOnHover – マウスのEnterイベントとMouse LeaveイベントでのCloseのタブを展開します (この場合、canOpenMultipleプロパティは使用されません)。

  • canOpenMultiple – 複数のタブを同時に開きます (canToggleプロパティは常にアクティブで、無効にすることはできません)。

  • 速度 と イージング – どこでも使用して、移行方法と時間を定義できます。

すべてのSXAレンダリングには、同じラッピング構造が含まれています。

<div class='component <component-name>'
  <div class='component-content'>
      <!-- component html -->
  </div>
</div>

内部のコードはレンダリングごとに異なります。多くの場合、Sitecoreで使用される特定のレンダリングを説明する一意のIDを持つ追加のラッピングdivがあります。CSS/JSスクリプトでは、これらのIDを使用しないでください。

手記

内部レンダリング構造は、ダッシュで区切られたクラス規則を持つクリーンなマークアップを使用します。ただし、フォームなどの一部の要素では、追加のSitecoreモジュール (マーケター向けのWebフォームなど) が使用され、外観が異なるHTMLが生成されます (キャメルケースのクラス名や、場合によってはテーブルなど)。このHTMLは変更できません。

すべてのHTMLレンダリングはプラットフォームの一部であり、HTMLが レンダリング バリアントによって形成される場合を除き、1つのプロジェクトまたはサイトに対して変更することはできません。

JavaScriptについて

複雑なレンダリングには、独自のJavaScriptがあります。これらのスクリプトは、JavaScriptフレームワークのメイン テーマ フォルダーにあります。このフレームワークには、レンダリングを登録するためのregisterやinitなどのパブリック メソッドと、Cookieなどの追加のヘルパーが用意されています。

JavaScriptで使用されるすべてのバックエンド プロパティは、レンダリング ラッピングdiv内のdata-properties属性に配置されます。これらはJSON形式でエンコードされます。

<div class='component accordion' data-properties='{"expandOnHover":false,"expandedByDefault":false,"speed":5000,
"easing":"easeInOutBounce","canOpenMultiple":false,"canToggle":false}'
</div>

以下は、JavaScriptフレームワークのクリップされたバージョンです。

var XA = XA || (function ($, document) {
    var api = {}, onPreInitHandlers, onPostInitHandlers, modules = {};
    onPreInitHandlers = new Array();
    onPostInitHandlers = new Array();
    /*
     * Register new module
     * @params name - name of the module
     * @params api - API object of the module
     * @params init - init function for module, if not defined api.init will be used
     */
    api.register = function (name, api, init) {
        modules[name] = {
            name: name,
            api: api,
            init: init || api.init || (function () { })
        };
    };
    api.registerOnPreInitHandler = function (handler) { onPreInitHandlers.push(handler); };
    api.registerOnPostInitHandler = function (handler) { onPostInitHandlers.push(handler); };
    var initScheduled = false;
    /*
     * Initializes all registered modules
     */
    api.init = function () {
        if (!initScheduled) {
            initScheduled = true;
            XA.ready(function () {
                try {
                    for (var name in modules)
                        if (modules.hasOwnProperty(name)) {
                            $xa.each(onPreInitHandlers, function (i, h) { h.process(name, modules[name]); });
                            modules[name].init();
                            $xa.each(onPostInitHandlers, function (i, h) { h.process(name, modules[name]); });
                        }
                }
                finally {
                    initScheduled = false;
                }
            });
        }
    };
    /*
     * Wrapper around $(document).ready - fires given function when (or if) document is ready
     */
    api.ready = function (fn) {
        $(document).ready(fn);
    };
    };
    return api;
})($, document);
XA.init();

CSSの

1つのクラスを置き換えて、レンダリング動作を変更できます (たとえば、標準ナビゲーションからモバイル ナビゲーションに変更するなど)。また、CSSクラスを追加し、スタイル設定とJavaScript機能を追加することで、独自のレンダリングバリアントを作成することもできます。命名規則に従う必要があります。特定のレンダリングのクラスは、常にレンダリングの名前で始まります。新しいクラスの機能を説明する単語を、ダッシュ名の規則を使用して追加します。たとえば、.navigation-mobile、.navigation-main-horizontal、.navigation-sidebarなどです。

この記事を改善するための提案がある場合は、 お知らせください!