關於版面配置

版面配置定義網站頁面中內容的排列方式。不同的版面配置可以包含不同數目的指定槽位。槽位是橫跨頁面寬度的區域，可包含一或多個類型的內容。

每個主題都有數個頁面版面配置。請參閱關於主題。

當您將頁面新增至網站時，會選取該頁面要使用的版面配置。每個版面配置在頁面上都有可在其中拖放內容的區域 (稱為槽位)。這些槽位的內容完全由您所決定。它可以是任何項目，從標題、文字和分隔線到多媒體、圖庫和社群媒體等。

版面配置包含有效的 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/

槽位是版面配置中的 DIV 元素，在類別屬性中的值為 "scs-slot"。槽位是使用者可新增元件以填入網站內容的區域。您可以指定 "scs-slot" 類別屬性，將多個 DIV 元素指定為槽位。每個槽位的 id 屬性都必須是唯一的。

註：

槽位不能採用巢狀結構，但您可以使用 CSS 讓它們成為浮動層以提供建議。若要這麼做，請使用元件群組或區段版面配置。請參閱建立區段版面配置。

瀏覽器檢視區的解析度變更時，額外包含 "scs-responsive" 類別屬性值的槽位將會重新整理其內容。對於大型的桌面顯示或小型的行動裝置，這讓槽位可以響應式的方式呈現。

最後一個 <script> 標記 (範例中的第 19 行) 會載入 Oracle Content Management 呈現程式碼。此程式碼的作用為在頁面上繪製元件，也可讓自訂程式碼存取呈現 API。如果沒有這個 <script> 標記，「網站產生器」就無法變更以版面配置為基礎的頁面。