將版面配置內容設為可編輯

您可以對版面配置中的某些文字或影像內容進行設定,讓使用者在處理以此版面配置為基礎的頁面時能夠編輯這些文字和影像。

您可以在任何主題中使用此功能,包括 Bootstrap 主題。修改會自動採用原始頁面的樣式。

您可以在版面配置中的下列 HTML 標記加上簡單標記:<p><h1><h6><div> 以及 <img>

文字和影像格式選項包括:

  • 文字:使用者可以指定粗體、斜體、底線以及連結。

  • 影像:使用者可以指定影像檔的連結。變更標題 (使用者將游標停駐在影像上方時所看到的內容) 的特性及新增替代文字以提供輔助。

修改文字或影像元素以讓使用者能夠進行編輯時,有以下兩個要項:

  1. 新增 scs-editableclass

  2. 新增唯一的 id 屬性。

版面配置修改過後,此功能便可供以該版面配置為基礎的所有頁面 (甚至是新頁面) 使用。

複製並貼上頁面時,會將修改項目複製到新頁面。

修改標題標記

以下是如何修改版面配置中的標題標記,以便讓使用者能夠進行編輯的範例。
  1. 將版面配置檔案同步到本機電腦,或是編輯 <h1> 標頭的 HTML 來源檔案。

  2. 新增 scs-editableclass,並且在標題的程式碼行中新增 id="test-heading" 屬性,讓編輯器能夠與其連附。例如:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. 儲存檔案。

  4. Oracle Content Management 同步並重新載入瀏覽器。

    當使用者將滑鼠游標停駐在標題上方時,其周圍便會出現黑色邊框,代表可以編輯該內容。使用者按一下標題後,邊框便會變成綠色,代表使用者現在可以編輯標題內容。

  5. 主題若尚未發布,請加以發布。如果已經發布,會在您重新整理瀏覽器後顯示此變更。

    主題發布之後,網站使用者便可以按一下標頭,在「網站產生器」中進行編輯。

    系統會為 scs-editable 元素建立一個虛擬元件,讓您可以「網站產生器」中進行變更,並且與頁面資料一同儲存。在程式實際執行時,控制器會在頁面呈現之前,將 scs-editable 標記取代為您在「網站產生器」中設定的值。

修改影像標記

修改版面配置中的影像標記使其可供使用者編輯的程序,與修改文字標記的程序類似。

  1. 新增 scs-editableclass

  2. 新增唯一的影像 id

使用者可以按一下影像,然後變更特性以使用其他影像。

以下是可供使用者編輯的影像範例程式碼:

<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>