從 Bootstrap 或網站設計樣板建立網站樣板
開放的 Oracle Content Management 架構代表可以使用在其他程式碼架構 (例如 Foundation 或 Bootstrap) 完成的工作。只要少許變更，便可以將 Bootstrap 樣板轉換為主題，讓其成為 Oracle Content Management 樣板的一部分。
先決條件
-
安裝並執行 Oracle Content Management 桌面應用程式，以便將資料夾和檔案同步至您的本機電腦。
-
將 Bootstrap 樣板主題資料夾、檔案及內容下載至您的本機電腦備用。
建立網站
從 Oracle Content Management 入門樣板建立網站：
-
按一下側邊導覽中的網站。
就會顯示現有網站清單。
-
按一下建立。
-
在「建立網站」對話方塊中，選取 JET 入門樣板或入門樣板，作為網站的基礎。
-
在此對話方塊中，輸入網站的名稱。網站 URL 中會使用此名稱。名稱中可以包含字母、數字、底線 (_) 以及連字號 (-)。如果您輸入空格，系統會自動以連字號取代。
請勿使用下列作為樣板、主題、元件、網站、或網站頁面的名稱：authsite、content、pages、scstemplate_*、_comps、_components、_compsdelivery、_idcservice 、_sitescloud、_sitesclouddelivery、_themes、_themesdelivery。您可以使用下列名稱作為網站頁面的名稱，但不可以作為樣板、主題、元件或網站的名稱：文件、網站。
註：
Oracle Content Management 網站 URL 的路徑區分大小寫。查詢或片段字串中的大小寫由開發人員在其自訂程式碼中控制。
https:[//host[:port]][/]path[?query][#fragment] \____________________/\________________________/ Location Data
-
(選擇性) 輸入網站的描述。
-
準備就緒時，請按一下建立。
畫面會出現一個進度列，顯示新網站的名稱和建立狀態。網站建立之後，其名稱就會顯示在網站清單中。它的最初狀態會是離線。
若要在清單中快速找到新建立的網站，請依上次更新時間排序清單。您剛剛建立的網站將會出現在清單頂端。
同步主題資料夾
從入門樣板建立網站時，會建立一個入門樣板主題的複本，並使用網站名稱加上主題名稱命名。例如，My_New_Site 的主題為 My_New_SiteTheme。
使用桌面應用程式將網站的主題資料夾和檔案同步至您的本機電腦。請參閱運用 Oracle Content Management 進行文件協作中的開始同步。
您就會在本機電腦上見到樣板主題資料夾階層和檔案。以下為範例：
theme_name
assets
css
main.css
js
topnav.js
designs
default
design.css
design.json
facebook.png
googleplus.png
linkedin.png
twitter.png
youtube.pgn
layouts
index.html
responsepages
404.html
_folder.json
_folder_icon.png
components.json
viewport.json
建立基本主題
-
將這些 Bootstrap 檔案複製到本機電腦上已同步的主題資料夾中，以覆寫現有的檔案。
-
html檔案會複製到theme_name/layouts資料夾中 -
css檔案會複製到theme_name/assets/css資料夾中 -
js檔案會複製到theme_name/assets/js資料夾中 -
image檔案會複製到theme_name/assets/images資料夾中，而且可依照背景、註腳、人物，將影像歸入所屬的子資料夾中
-
-
修改
layout資料夾中的html檔案，以更新相對路徑並增加必要元素。就典型的 Bootstrap 主題而言，/assets資料夾會有許多相對路徑，因此您必須加以修改以指向主題資料夾。請修正所使用
css、js和images資料夾的路徑：_scs_theme_root_/assets/css/ _scs_theme_root_/assets/js/ _scs_theme_root_/assets/images/
註：
此步驟完成之後，_scs_theme_root部分將會自動調整為使用主題的環境。 -
每個 Oracle Content Management 版面配置都有三個需要注意的地方：
-
html檔案的<head>標記中需包含下列標記：-
<!--$SCS_RENDER_INFO--> -
<!--$SCS_SITE_HEADER--> -
<!--$SCS_PAGE_HEADER-->
-
-
版面配置檔案結尾的
<body>標記內需包含呈現器命令檔。這兩個路徑在「網站產生器」和程式實際執行環境中都會自動調整。<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
-
renderer.js檔案的內容之後需包含下列標記：-
<!--$SCS_PAGE_FOOTER--> -
<!--$SCS_SITE_FOOTER-->
-
-
確認修改過的主題檔案與 Oracle Content Management 中的網站同步。
更新網站頁面
在「網站產生器」中開啟網站時，最初見到的是預設網站中的頁面。您可以刪除不想要的頁面，並將想要保留頁面的版面配置切換成其中一個新的版面配置。
-
按一下側邊導覽中的網站。
就會顯示現有網站清單。
-
選取網站並從滑鼠右鍵功能表中選擇開啟，或按一下動作列中的
。 -
輸入更新的名稱和選擇性的描述，然後按一下建立。
針對更新項目名稱，您可以使用字母、數字、底線 (_) 和連字號 (-)。如果您輸入空格，系統會自動以連字號取代。
如果已經有網站的更新，請由清單中選取一個更新，然後按一下
。 -
「網站產生器」便會以預覽模式開啟。若要在提要欄位中變更或使用導覽選項，請確定「編輯」開關
設為編輯。 -
若要編輯特定頁面，請使用提要欄位中的網站樹狀結構或使用網站的專屬導覽來選擇頁面。
-
若要移除不想要的頁面，請選取該頁面，然後按一下
。 -
若要新增頁面，請按一下新增頁面。若要調整頁面在網站樹狀結構中的位置，請拖放頁面。
-
若要變更頁面的版面配置，請從網站樹狀結構中選擇該頁面，然後按一下
以顯示頁面設定值。前往頁面版面配置欄位，然後從功能表中選取其他版面配置。頁面版面配置的數目和類型取決於網站所關聯的主題。
-
按一下儲存以儲存目前更新的變更。您可以繼續對目前的更新進行作業，或建立新的更新 (若有需要)。
更新導覽
在網站預覽查看的導覽並不會與目前的階層相同，那是因為 Bootstrap 主題之版面配置中的導覽採用硬式編碼。
請更新導覽，將 Bootstrap 主題中的硬式編碼程式碼取代為從網站階層動態產生的程式碼。
編輯本機的主題檔案同步複本。
-
移除版面配置的硬式編碼導覽程式碼。以下是必須從典型之 Bootstrap 主題移除的硬式編碼導覽範例。這是典型的標頭區段，包含標誌、頁面太窄時之「漢堡」功能表的「切換導覽」部分 (響應式部分)，以及導覽至其他頁面的硬式編碼頁面導覽。
<header id="header" class="header navbar-fixed-top"> <div class="container"> <h1 class="logo"> <a href="index.html"><span class="text">Velocity</span></a> </h1><!--//logo--> <nav class="main-nav navbar-right" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><!--//nav-toggle--> </div><!--//navbar-header--> <div id="navbar-collapse" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active nav-item"><a href="index.html">Home</a></li> <li class="nav-item"><a href="features.html">Features</a></li> <li class="nav-item"><a href="pricing.html">Pricing</a></li> <li class="nav-item dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="download.html">Download Apps</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog-single.html">Blog Single</a></li> <li><a href="blog-category.html">Blog Category</a></li> <li><a href="blog-archive.html">Blog Archive</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li><!--//dropdown--> <li class="nav-item"><a href="login.html">Log in</a></li> <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li> </ul><!--//nav--> </div><!--//navabr-collapse--> </nav><!--//main-nav--> </div><!--//container--> </header><!--//header--> -
撰寫 JavaScript 程式碼以瀏覽網站結構資訊並產生導覽程式碼，然後將此 JavaScript 程式碼包含到版面配置，例如：
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
-
根據特定 CSS 應有的標記，修改
topnav.js檔案的輸出。
更新網站版面配置
此時網站雖可運作，但版面配置中並無可編輯的區域 (槽位)。
-
在版面配置中找出或新增 DIV 元素，並將其指定為槽位。
槽位是版面配置中的 DIV 元素，在類別屬性中的值為
"scs-slot"。每個槽位的id屬性都必須是唯一的。例如：<div id="slot-content1" class="scs-slot scs-responsive"></div>
若要讓槽位能夠自動根據瀏覽器檢視區的大小調整，請包含類別屬性
"scs-responsive"。 -
視需要重複此步驟，在此版面配置或其他版面配置中建立其他槽位。
發布網站
完成並儲存所有網站變更之後，您必須發布網站。
發布網站會取用目前更新的所有變更，並將這些變更合併至基本網站中，讓更新的基本網站成為新的基本網站。
建立新樣板
您現在已有一個具備關聯主題的可運作網站，因此您可以讓其成為樣板並與他人共用，讓他們能夠從樣板建立網站。
-
按一下 Oracle Content Management 側邊導覽中的開發人員。
-
按一下檢視所有樣板。
-
按一下建立，然後選擇從現有網站。
-
選取使用入門樣板和 Bootstrap 樣板所建立的新網站。
-
輸入新樣板的名稱，然後按一下建立。
-
若要封裝樣板以搭配其他 Oracle Content Management 執行處理使用，請選取樣板並選擇匯出功能表選項，建立可供下載的
.zip檔案。