開發內容版面配置

內容版面配置可協助使用者透過網站頁面中所使用的內容清單或內容預留位置元件,檢視內容項目中的資料。您可以為一種內容類型建立多個內容版面配置,以建立不同檢視或呈現內容項目的不同部分。

例如,「部落格文章」內容類型可能會依部落格文章內容的使用方式和位置的不同,而需要不同的內容版面配置。網站的首頁可能顯示部落格文章項目清單,但按一下首頁中的部落格文章後,會在詳細資訊頁面顯示該部落格文章的詳細資訊。

首頁有一個設定成列出「部落格文章」內容類型項目的內容清單,其中使用「部落格文章摘要」內容版面配置作為項目檢視。

「詳細資訊」頁面的內容預留位置中使用「部落格文章標頭」內容版面配置來顯示標頭影像和標題。兩欄區段版面配置包含兩個內容預留位置,分別佔 70% 和 30% 的寬度,使用的是「部落格文章內容」和「部落格文章作者」內容版面配置。如您所見,這裡使用了四種不同的內容版面配置來呈現相同的內容類型。

您可以採用下列兩種方式之一來建立內容版面配置:

  • 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。

產生絕對 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');

下列主題說明如何開發內容版面配置:

相關主題

如需有關如何管理內容版面配置的資訊,請參閱管理自訂元件與版面配置

如需有關在網站中使用數位資產及其他內容項目的資訊,請參閱運用 Oracle Content Management 管理資產中的使用資產管理數位資產