基于 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。下面的名称虽然可用于站点页，但不要将其用于模板、主题、组件或站点：documents、sites。
注：

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 布局都有三个要求：
1. 在 html 文件的 <head> 标记中包含以下标记：
  - 
  - 
  - 
2. 在布局文件的末尾包含呈现器脚本（在 <body> 标记内部）。在站点构建器和运行时环境中，以下两个路径都会自动调整。
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. 在 renderer.js 文件的 include 后面包含以下标记：
  - 
  -

验证修改后的主题文件是否已与 Oracle Content Management 中的站点同步。

更新站点页

在站点构建器中打开站点时，最初会看到默认站点中的页。您可以删除不需要的页，并将要保留的页上的布局切换到新布局之一。

在侧面导航中，单击站点。

此时将显示现有站点的列表。
选择站点，然后在右键单击菜单中选择打开，或单击操作栏中的。
输入更新的名称及可选说明，然后单击创建。

对于更新名称，您可以使用字母、数字、下划线 (_) 和连字符 (-)。如果输入空格，则使用连字符自动取代空格。

如果已具有站点的更新，请从列表中选择此更新，然后单击。
站点构建器将以预览模式打开。要进行更改或者使用子工具栏中的导航选项，请确保“编辑”开关设置为编辑。
要编辑特定页，请使用子工具栏中的站点树或使用站点自己的导航来选择该页。
要删除不需要的页，请选择该页，然后单击。
要添加新页，请单击添加页。可以通过拖放页来在站点树中重新定位页。
要更改与页关联的布局，请在站点树中选择该页，然后单击以显示页设置。

转到页布局字段，然后从菜单中选择其他布局。页布局的数量和类型取决于与您的站点关联的主题。
单击保存以将更改保存到当前更新。可以继续使用当前更新，也可以根据需要创建新的更新。

更新导航

在站点预览中查看导航时，它与当前层次不匹配，这是因为布局中的硬编码导航来自 Bootstrap 主题。

可更新导航以使用从站点层次动态生成的代码替换 Bootstrap 主题中的硬编码代码。

编辑主题文件的本地已同步副本。

从布局中删除硬编码导航代码。下面是必须从典型 Bootstrap 主题中删除的硬编码导航示例。这是典型的 header 部分，包含 logo、‘Hamburger’ 菜单上（在页太窄时使用的）‘Toggle Navigation’ 部分（响应部分）和其他页的硬编码页导航。

<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>
```
修改 topnav.js 文件的精确输出以匹配您的特定 CSS 中所需的标记。

更新站点布局

此时，站点功能正常，但布局中没有可编辑的区域（内容框）。

在布局中找到或添加 DIV 元素并将其指定为内容框。

内容框是布局中 class 属性值为 "scs-slot" 的 DIV 元素。每个内容框都必须具有唯一的 id 属性。例如：
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
要使内容框根据浏览器视窗的大小自动调整，请包含 class 属性 "scs-responsive"。
根据需要重复此步骤以在该布局或其他布局中创建其他内容框。

发布站点

完成并保存对站点的所有更改后，必须发布该站点。

发布站点会获取当前更新中的所有更改并将其合并到基本站点中，从而使更新中的内容进入新的基本站点。

创建新模板

现在，您有了一个具有关联主题的功能正常的站点，因此可以将其做成模板以与其他人共享，以便他们可以基于此模板创建站点。

在 Oracle Content Management 侧面导航中，单击开发人员。
单击查看所有模板。
单击创建，然后选择从现有站点。
选择使用入门级模板和 Bootstrap 模板创建的新站点。
输入新模板的名称，然后单击创建。
要打包模板以用于 Oracle Content Management 实例，请选择模板，然后选择导出菜单选项以创建可以下载的 .zip 文件。