开发内容布局

内容布局通过站点页中使用的内容列表或内容占位符组件来帮助用户查看内容项中的数据。您可以为一种内容类型创建多个内容布局，以创建不同视图或表示内容项的不同部分。

例如，根据 Blog-Post 内容的使用方式和使用位置，Blog-Post 内容类型可能需要不同的内容布局。站点的主页可能会显示 Blog-Post 项列表，但在主页上单击了博客帖子时，详细信息页可能会显示有关相应博客帖子的详细信息。

主页包含配置为列出 Blog-Post 内容类型的项的内容列表，并使用 Blog-Post-Summary 内容布局作为项视图。

“详细信息”页在内容占位符中使用 Blog-Post-Header 内容布局来显示页眉图像和标题。两列部分布局包含两个内容占位符，宽度各占 70% 和 30%，并使用 Blog-Post-Content 和 Blog-Post-Author 内容布局。如您所见，使用了四个不同的内容布局来可视化同一内容类型。

可以采用以下两种方式中的任何一种来创建内容布局：

在 Oracle Content Management 中，选择开发人员 > 查看所有组件 > 创建 > 创建内容布局。
在 OCE 工具包项目中，使用 cec create-contentlayout 命令。

Oracle Content Management 会按内容类型创建默认内容布局。要修改默认内容布局，可以编辑以下文件：

assets/layout.html

编辑此文件以更改 HTML 视图。
assets/design.css

编辑此文件为内容布局设置样式。
assets/render.js

编辑此文件以更改 layout.html 中使用的数据，或向内容布局添加动态行为。

内容布局组件呈现来自 Oracle Content Management 服务器的内容项。大多数资产存储在 Oracle Content Management 服务器中。有时，您可能希望在内容布局本身中使用本地可用的静态资产，例如，用于样式设置用途的背景图像。例如，在下面的内容布局中，可以在 render.js 中生成 images/background.jpg 的绝对 URL，并在 layout.html 中使用它。

最简单的绝对 URL 生成方法是使用内置的 requirejs 文件。定义 'require' 作为相关项，并使用 require.toURL() 生成 URL，如以下代码所示：

define([
    'require',
    'jquery',
    'mustache',
    'text!./layout.html',
    'css!./design.css'
], function (require, $, Mustache, templateHtml, css) {
    'use strict';

   var imageURL = req.toUrl('./images/background.jpg');

以下主题介绍了如何开发内容布局：