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

概要

SXA は、標準化された HTML 構造を使用して、一貫した HTML レンダリングに依存しています。

SXA は、構造 (HTML) をデザイン (CSS) から分離して、Web サイトのデザインを簡単に変更できるようにします。これを可能にするために、SXA は、適切に構造化された安定した 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>
    

列と行の両方にクラスを追加できます。特定のスプリッター セクションをマークして、他のセクションとは異なるスタイルにすることもできます。これは、ブロークン グリッド レイアウトを作るページ パーツのスタイルを設定する場合に役立ちます。ただし、特定の行のグリッド動作のみをオーバーライドできます。

すべての 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 – マウス エンター イベントでタブを展開し、マウス リーブ イベントでタブを閉じます (この場合、 canOpenMultiple プロパティは使用されません)。

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

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

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

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

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

注記

内部のレンダリング構造は、ダッシュ区切りのクラス規則でクリーンなマークアップを使用します。フォームなどの一部の要素は、追加の Sitecore モジュール (マーケティング担当者向けの Web フォームなど) を使用し、異なる外観の HTML を生成する (camelCase クラス名、場合によってはテーブル) ようないくつかの例外があります。この HTML は変更できません。

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

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

JavaScript で使用されるすべてのバックエンド プロパティは、レンダリング ラッピング div 内のデータ プロパティ属性に配置されます。これらは 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 クラスを追加して独自のレンダリング バリアントを作成し、スタイルと JavaScript 機能を追加することもできます。命名規則に従う必要があります。特定のレンダリングのクラスは、常にレンダリングの名前で始まります。ダッシュ名の規則を使用して、新しいクラスの機能を説明する単語を追加します。次に例を示します。.navigation-mobile.navigation-main-horizontal.navigation-sidebar