レイアウトについて

レイアウトは、どのようにコンテンツをサイト・ページに配列するかを定義します。異なるレイアウトに、異なる数の名前付きスロットを含めることができます。スロットはページの幅に広がる領域で、1つ以上のタイプのコンテンツを含めることができます。

各テーマには複数のページ・レイアウトがあります。テーマについてを参照してください。

サイトにページを追加する場合、そのページに使用するレイアウトを選択します。各レイアウトにはページ上の領域(スロットと呼ばれる)があり、コンテンツをドラッグ・アンド・ドロップできます。これらのスロットにどんなコンテンツを配置するかは、すべて自由に選択できます。タイトル、テキストおよびドライバからマルチメディア、ギャラリおよびソーシャル・メディアまで何でも使用できます。

レイアウトには、有効なHTMLコンストラクトに加え、Oracle Content Managementレンダラによって認識される特別なマークアップが含まれます。レイアウトは、標準に準拠したモードでページをレンダリングするようブラウザを構成するために、DOCTYPE文で始まる必要があります。たとえば、<!DOCTYPE html>です。この文は、最良の結果を得るために特定のコンポーネントに必要となります。

次のサンプル・コードは、最小限のレイアウトを示しています:

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

ブラウザでページがレンダリングされるときには、様々なトークンが拡張されます。

  • [!--$SCS_THEME_NAME--]

    これは、現在サイトのために選択されているテーマの名前を拡張します。このトークンを使用すると、このトークンを使用するURLでは現在のテーマが参照されるため、テーマをコピーできます。

  • [!--$SCS_DESIGN_NAME--]

    これは、現在サイトのために選択されているデザインの名前を拡張します。これにより、レイアウトをテーマ内の複数のデザインによって使用できるようになります。

  • [!--$SCS_RENDER_INFO--]

    これは、ページ階層、およびページの情報をレンダリングするコンポーネントを保持する、スクリプト・タグを拡張します。これは、レイアウトの<head>セクションに配置する必要があります。

  • [!--$SCS_SITE_HEADER--]

    これは、検索エンジン最適化(SEO)プロパティ内のヘッダー・フィールドに指定される、サイト・ヘッダー値を拡張します。すべてのページに配置する必要がある、サイト全体に及ぶマークアップは、ここで入力できます。検索エンジンのプロパティの設定を参照してください。

  • [!--$SCS_PAGE_HEADER--]

    これは、サイト・ビルダーの「ページ設定」プロパティの「ページ・ヘッダー」フィールドで見つかったページ・ヘッダー値に拡張されます。このページに配置する必要があるページ固有のマークアップは、ここで入力できます。

  • [!--$SCS_SITE_FOOTER--]

    これは、検索エンジン最適化(SEO)プロパティ内のフッター・フィールドにある、サイト・フッター値を拡張します。すべてのページに配置する必要がある、サイト全体に及ぶマークアップは、ここで入力できます。検索エンジンのプロパティの設定を参照してください。

注:

トークンでは、[!--$および--]のかわりにデリミタとして<!--$接頭辞および-->接尾辞を使用することもできます。

サイトがオンラインの場合は、リンク内の次のトークンが、使用されているコンテキストを認識している実際の値と置き換えられます。これにより、サイトが編集されている場合、およびオンライン時に公開済サイト内にある場合に、リンクが機能できます。

  • /_sitescloud/は、/_sitesclouddelivery/と置き換えられます

  • /_themes/は、/_themesdelivery/と置き換えられます

スロットは、クラス属性内に値scs-slotを持つレイアウトのDIV要素です。スロットは、ユーザーがサイト・コンテンツへの入力のためにコンポーネントを追加できる場所です。"scs-slot"クラス属性を割り当てることで、複数のDIV要素をスロットとして指定できます。スロットごとに一意のid属性を設定する必要があります。

注:

スロットはネストできませんが、CSSを使用してそれらをオーバーレイすることによって、それらの提案を示すことができます。これを行うには、コンポーネント・グループまたはセクション・レイアウトを使用します。セクション・レイアウトの作成を参照してください。

"scs-responsive"というクラス属性値もあるスロットでは、ブラウザのビューポートで解像度が変更されると、それらのコンテンツがリフレッシュされます。これにより、大きいデスクトップ・ディスプレイまたは小さいモバイル・デバイスに対応してスロットをレンダリングできます。

最後の<script>タグ(例では19行目)は、Oracle Content Managementレンダリング・コードをロードします。このコードは、ページでのコンポーネントの描画を担当するほか、カスタム・コードによるレンダリングAPIへのアクセスを可能にします。この<script>タグを使用しない場合、レイアウトに基づくページをサイト・ビルダーで変更できません。