布局定义内容如何在站点页上排列。不同布局可以包含不同数量的命名内容框。内容框是一个横跨页的区域,其中可以容纳一种或多种类型的内容。
每个主题有多个页布局。请参见关于主题。
将页添加到站点之后,您选择用于该页的布局。每个布局在页上都有一个称为内容框的区域,在其中可以拖放内容。这些内容框中的内容完全由您决定。这可以是标题、文本和分隔线乃至多媒体、图库和社交媒体的任何内容。
布局包含有效 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>
标记,则站点构建器无法更改基于布局的页。