Создание шаблона сайта на основе шаблона 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.
Примечание.:

URL-адрес сайта Oracle Content Management зависит от регистра букв. Регистр букв в запросе или строках фрагментов определяется разработчиками в своем коде.
```
      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, которая может быть разбита на подпапки с изображениями фона, нижнего колонтитула, людей и т. д.
Измените файлы html в папке layout, чтобы обновить относительные пути и добавить необходимые элементы. Для типичной темы 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. Включите в тег <head> файла html следующие теги:
  - 
  - 
  - 
2. Добавьте сценарий рендерера в конец файлов макета, непосредственно внутри тега <body>. Оба этих пути автоматически настраиваются в Site Builder и средах выполнения.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Добавьте следующие теги после включения файла renderer.js:
  - 
  -

Убедитесь, что измененные файлы темы синхронизированы с сайтом в Oracle Content Management.

Обновление страниц сайта

При открытии сайта в Site Builder сначала отображаются страницы сайта по умолчанию. Можно удалить ненужные страницы и переключить макет на страницах, которые требуется сохранить, на один из новых макетов.

На боковой панели навигации нажмите Сайты.

Отображается список существующих сайтов.
Выберите сайт и выберите Открыть в контекстном меню или нажмите на панели действий.
Введите имя для обновления и необязательное описание, затем нажмите Создать.

В имени обновления можно указывать буквы, цифры, символы подчеркивания (_) и дефисы (-). Введенный пробел автоматически заменяется дефисом.

Если для сайта уже есть обновления, выберите обновление из списка и щелкните .
Site Builder открывается в режиме предварительного просмотра. Чтобы внести изменения или воспользоваться средствами навигации на боковой панели, убедитесь, что переключатель "Редактировать" переведен в положение Редактировать.
Чтобы отредактировать определенную страницу, выберите ее в дереве сайта на левой боковой панели или с помощью собственной системы навигации сайта.
Чтобы удалить ненужную страницу, выберите ее и нажмите .
Чтобы добавить новую страницу, нажмите Добавить страницу. Положение страницы в дереве сайта можно изменить путем перетаскивания.
Чтобы изменить макет, связанный со страницей, выберите страницу на дереве сайта и нажмите для отображения настроек страницы.

Перейдите к полю Макет страницы и в меню выберите другой макет. Количество и тип макетов страницы зависит от темы, связанной с вашим сайтом.
Кнопка Сохранить позволяет сохранить изменения в текущем обновлении. При необходимости можно продолжить работу в текущем обновлении или создать новые обновления.

Обновление навигации

При просмотре навигации в предварительном просмотре сайта она не совпадает с текущей иерархией, так как эта навигация, жестко заданная в макете, взятом из темы 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>
```
Измените точный вывод файла topnav.js в соответствии с разметкой, ожидаемой в вашей конкретной таблице CSS.

Обновление макетов сайта

На данном этапе сайт функционирует, но в макетах отсутствуют редактируемые области (ячейки).

Найдите или добавьте элемент 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, который можно выгрузить.