コンテンツ・レイアウトの開発

コンテンツ・レイアウトは、サイト・ページで使用されているコンテンツ・リストまたはコンテンツ・プレースホルダー・コンポーネントを使用してコンテンツ・アイテムのデータを表示するのに役立ちます。コンテンツ・タイプの複数のコンテンツ・レイアウトを作成して、異なるビューを作成したり、コンテンツ・アイテムの異なる部分を表すことができます。

たとえば、Blog-Postコンテンツ・タイプでは、Blog-Postコンテンツが使用される方法および場所に応じて異なるコンテンツ・レイアウトが必要である場合があります。サイトのホーム・ページにBlog-Postアイテムのリストが表示される場合がありますが、ホーム・ページでブログ投稿をクリックすると、「詳細」ページでそのブログ投稿の詳細を表示できます。

「ホーム」ページには、Blog-Post-Summaryコンテンツ・レイアウトをアイテム・ビューとして使用して、Blog-Postコンテンツ・タイプのアイテムをリストするように構成されたコンテンツ・リストがあります。

「詳細」ページでは、コンテンツ・プレースホルダーのBlog-Post-Headerコンテンツ・レイアウトを使用して、ヘッダー・イメージとタイトルを表示します。 2列のセクション・レイアウトでは、Blog-Post-ContentとBlog-Post-Authorのコンテンツ・レイアウトを使用して、70%と30%の幅で2つのコンテンツ・プレースホルダーが囲まれます。ご覧のとおり、4つの異なるコンテンツ・レイアウトを使用して同じコンテンツ・タイプをビジュアル化しています。

次の2つの方法のいずれかでコンテンツ・レイアウトを作成できます:

Oracle Content Managementで、「開発者」 > 「すべてのコンポーネントの表示」 > 「作成」 > 「コンテンツ・レイアウトの作成」を選択します。
Content Toolkitプロジェクトで、cec create-contentlayoutコマンドを使用します。

Oracle Content Managementは、コンテンツ・タイプのデフォルトのコンテンツ・レイアウトを作成します。デフォルトのコンテンツ・レイアウトを変更するには、次のファイルを編集します:

assets/layout.html

このファイルを編集してHTMLビューを変更します。
assets/design.css

このファイルを編集してコンテンツ・レイアウトのスタイルを設定します。
assets/render.mjs

このファイルを編集して、layout.htmlで使用されるデータを変更するか、コンテンツ・レイアウトに動的な動作を追加します。

コンテンツ・レイアウト・コンポーネントは、Oracle Content Managementサーバーからコンテンツ・アイテムをレンダリングします。ほとんどのアセットはOracle Content Managementサーバーに格納されます。場合によっては、スタイル設定目的のバックグラウンド・イメージなど、コンテンツ・レイアウト自体でローカルに使用できる静的アセットを使用することもできます。たとえば、次のコンテンツ・レイアウトでは、images/background.jpgの絶対URLをrender.mjsで生成し、layout.htmlで使用することができます。

render.mjsの場合、次のコードに示すように、絶対URLを生成する最も簡単な方法は、組込みのimport.meta.url値を使用してURLを生成することです:

const assetsFolder = import.meta.url.replace('/render.mjs', '');
const imageURL = `${assetsFolder}/images/background.jpg`;

次のトピックでは、コンテンツ・レイアウトを開発する方法について説明します: