关于布局

布局定义内容如何在站点页上排列。不同布局可以包含不同数量的命名内容框。内容框是一个横跨页的区域，其中可以容纳一种或多种类型的内容。

每个主题有多个页布局。请参见关于主题。

将页添加到站点之后，您选择用于该页的布局。每个布局在页上都有一个称为内容框的区域，在其中可以拖放内容。这些内容框中的内容完全由您决定。这可以是标题、文本和分隔线乃至多媒体、图库和社交媒体的任何内容。

布局包含有效 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--]

    此项扩展为在搜索引擎优化 (Search Engine Optimization, SEO) 属性的“页眉”字段中指定的站点页眉值。可以在此处输入要放在所有页上的站点范围标记。请参见设置搜索引擎属性。

  • [!--$SCS_PAGE_HEADER--]

    此项扩展为在站点构建器中“页设置”属性中的“页标题”字段中找到的页标题值。可以在此处输入要为此页放置的特定于页的标记。

  • [!--$SCS_SITE_FOOTER--]

    此项扩展为在搜索引擎优化 (Search Engine Optimization, SEO) 属性的“页脚”字段中找到的站点页脚值。可以在此处输入要放在所有页上的站点范围标记。请参见设置搜索引擎属性。

注：

标记还可以使用 <!--$ 前缀和 --> 后缀作为分隔符代替 [!--$ 和 --]。

站点联机时，链接中的以下标记将替换为了解其使用的上下文的实际值。这样，链接便可以在编辑站点时起作用，并且在联机时在已发布的站点中起作用。

  • /_sitescloud/ 替换为 /_sitesclouddelivery/

  • /_themes/ 替换为 /_themesdelivery/

内容框是布局中 class 属性值为 "scs-slot" 的 DIV 元素。用户可以在内容框中添加组件以填充站点内容。通过分配 "scs-slot" 类属性，可以将多个 DIV 元素指定为内容框。每个内容框都必须具有唯一的 id 属性。

注：

内容框不能嵌套，但是可以通过使用 CSS 覆盖它们来给出建议。如果您要执行此操作，请使用组件组或部分布局。请参见创建部分布局。

浏览器视窗更改分辨率时，额外具有类属性值 "scs-responsive" 的内容框将刷新其内容。这样，内容框可以针对大的桌面显示或小的移动设备相应地进行呈现。

最后的 <script> 标记（示例中的行 19）加载 Oracle Content Management 呈现代码。此代码负责在页上绘制组件，并且它还允许定制代码访问呈现器 API。如果没有此 <script> 标记，则站点构建器无法更改基于布局的页。