機械翻訳について
  1. Oracle Content Managementでのサイトの構築
  2. サイトの開発
  3. レイアウトの開発
  4. レイアウトについて

レイアウトについて

レイアウトでは、サイト・ページでどのようにコンテンツを配置するかを定義します。 異なるレイアウトに、異なる数の名前付きスロットを含めることができます。 スロットとは、ページの幅にわたって、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>タグを使用しないと、レイアウトに基づくページをサイト・ビルダーで変更できません。