О макетах

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

В каждой теме есть несколько макетов страниц. См. О темах.

При добавлении страницы на сайт требуется выбрать ее макет. В каждом макете есть области на странице (известные как ячейки), в которые можно перетаскивать контент. Перемещаемое в ячейки содержимое полностью зависит от вас. Это может быть все что угодно - от заголовков, текста и разделителей до мультимедиа, галерей и социальных сетей.

Макет содержит допустимые HTML-конструкции, а также специальную разметку, понятную рендереру Oracle Content Management. Макет должен начинаться с инструкции DOCTYPE, чтобы настроить браузер на отображение страницы в режиме, соответствующем стандартам. Например: <!DOCTYPE html>. Эта инструкция требуется для определенных компонентов для достижения наилучших результатов.

В этом примере кода показан минимальный макет:

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

При отображении страницы в браузере раскрываются различные маркеры.

  • [!--$SCS_THEME_NAME--]

    Этот маркер разворачивается в имя темы, выбранной в данный момент для сайта. Использование этого маркера позволяет копировать тему, поскольку URL-адреса, использующие этот маркер, будут ссылаться на текущую тему.

  • [!--$SCS_DESIGN_NAME--]

    Этот маркер разворачивается в имя дизайна, выбранного в данный момент для сайта. Это позволяет использовать макет для нескольких дизайнов в рамках темы.

  • [!--$SCS_RENDER_INFO--]

    Этот маркер разворачивается в тег сценария, содержащий сведения об иерархии страниц и рендеринге компонентов для страницы. Его следует поместить в раздел <head> макета.

  • [!--$SCS_SITE_HEADER--]

    Этот маркер разворачивается в значение верхнего колонтитула сайта, указанного в поле "Верхний колонтитул" в свойствах поисковой оптимизации (SEO). Здесь можно ввести общую для всего сайта разметку, которую требуется разместить на всех страницах. См. Настройка свойств поисковых систем.

  • [!--$SCS_PAGE_HEADER--]

    При этом расширяется значение верхнего колонтитула страницы, которое находится в поле "Заголовок страницы" в свойствах "Настройки страницы" в Site Builder. Здесь можно ввести специфическую для страницы разметку, которую требуется разместить для этой страницы.

  • [!--$SCS_SITE_FOOTER--]

    Этот маркер разворачивается в значение нижнего колонтитула сайта, указанного в поле "Нижний колонтитул" в свойствах поисковой оптимизации (SEO). Здесь можно ввести общую для всего сайта разметку, которую требуется разместить на всех страницах. См. Настройка свойств поисковых систем.

Примечание.:

В маркерах также могут использоваться префикс <!--$ и суффикс --> в качестве разделителей вместо [!--$ и --].

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

  • /_sitescloud/ заменяется на /_sitesclouddelivery/

  • /_themes/ заменяется на /_themesdelivery/

Ячейки — это элементы DIV в макете, для которых в атрибуте класса указано значение "scs-slot". Ячейка — это место, куда пользователи добавляют компоненты для заполнения сайта контентом. Несколько элементов DIV можно назначить в качестве ячеек, назначив атрибут класса "scs-slot". Каждая ячейка должна иметь уникальный атрибут id.

Примечание.:

Ячейки не могут быть вложенными, но можно предложить, что их можно накладывать с помощью CSS. Для этого используйте группу компонентов или макет раздела. См. Создание макета раздела.

Ячейки, для которых также задано значение атрибута класса "scs-responsive", обновляют свое содержимое по мере изменения разрешения окна просмотра браузера. Это позволяет ячейкам должным образом отображаться на больших настольных дисплеях или небольших мобильных устройствах.

Последний тег <script> (строка 19 в данном примере) загружает код рендеринга Oracle Content Management. Этот код отвечает за рисование компонентов на странице, а также предоставляет пользовательскому коду получить доступа к API для рендеринга. Без тега <script> страницы, основанные на данном макете, не могут быть изменены приложением Site Builder.