Создание макетов контента с помощью Oracle Content Management

Создайте макет контента для размещения полей в элементе контента при отображении на странице сайта. При добавлении на страницу элемент контента будет использовать выбранный макет контента.

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

При использовании в компоненте списка контента макет контента однократно повторяется для каждого элемента контента. Затем компоновки контента упорядочиваются по макету раздела.

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

Чтобы создать макет контента, выполните указанные ниже действия.

На домашней странице Oracle Content Management нажмите Разработчик на боковой панели навигации.
Отображается страница Разработчик.
Нажмите Смотреть все компоненты.
В раскрывающемся меню Создать справа выберите Создать макет контента.
В диалоговом окне Создание макета контента выберите типы контента, которые будут использовать макет, выберите поля для отображения, и включите параметр Добавить поддержку пользовательских настроек при использовании на сайтах, если требуется, чтобы создатели сайтов могли добавлять пользовательские настройки и стили при добавлении компонентов "элемент контента" и "список контента" на страницу.
Укажите имя и описание компонента макета контента и нажмите Создать.

Этот макет контента добавляется к компонентам.

Примечание.:
В заголовках макета контента допустимы только буквы, цифры, дефисы и символы подчеркивания.
Чтобы экспортировать макет контента для редактирования, выберите его и в контекстном меню нажмите Экспорт или на панели действий нажмите .
1. Перейдите к существующей папке или выберите Создать, а затем Папка, чтобы создать новую папку, и введите имя и (при необходимости) описание.
2. Установите флажок рядом с именем папки и нажмите ОК.
3. Нажмите на значок или имя папки, чтобы открыть ее.
В выбранной папке создается файл пакета макета с заданным именем макета контента и расширением имени .zip. Выгрузите файл в среду разработки для редактирования указанных файлов.

Эти файлы управляют макетом полей в элементах контента, использующих макет контента карты сотрудника. Если включена функция Добавить поддержку пользовательских настроек при использовании на сайтах, то создается также дополнительный файл с именем settings.html, который обеспечивает визуализацию по умолчанию одного элемента контента для его отображения.

Описание иллюстрации GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Измените файлы design.css, layout.html и render.js, чтобы получить нужный макет контента.

Например, в следующих файлах укажите макет контента карты сотрудника:

Измените файл design.css:

.scs-tile-layout {
    font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    font-style: normal;
    color: #333;
}

.scs-tile-layout li {
    list-style: none;
    font-size: 14px;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: 200;
    margin: 0px;
}

.scs-tile-layout-img-container {
    height: 150px;
    width: 100px;
    float: left;
    margin: 0em 0.5em 0em 0em;
    padding: 0px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.scs-tile-layout-img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    height: 100%;
    min-width: 100%;
}

.scs-tile-layout p {
    margin: 0px;
}

Измените файл layout.html:

{{#data.employee_profile_pictureURL}}
<div class="scs-tile-layout-img-container">
    <img class="scs-tile-layout-img" src="{{data.employee_profile_pictureURL}}" />
</div>
{{/data.employee_profile_pictureURL}}
<ul class="scs-tile-layout">
    <li>
        <p><b>{{name}}</b></p>
    </li>
    <li>&nbsp;</li>
    <li>
        <p>{{data.employee_job_title}}</p>
        <p>{{data.employee_location}}</p>
        <p><b>Phone: </b>{{data.employee_phone}}</p>
    </li>
    {{#scsData.detailPageLink}}
    <li>
        <a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail-page">Profile</span></a>
    </li>
    {{/scsData.detailPageLink}}
</ul>

Измените файл render.js:

/* globals define */

define([
    'jquery',
    'mustache',
    'text!./layout.html',
    'css!./design.css'
], function($, Mustache, templateHtml, css) {
    'use strict';

    function ContentLayout(params) {
        this.contentItemData = params.contentItemData || {};
        this.scsData = params.scsData;
        this.contentClient = params.contentClient || (params.scsData ? params.scsData.contentClient : null);
        // retrieve the custom settings
        this.customSettiings = this.scsData.customSettingsData
        || {};
    }

    ContentLayout.prototype = {

        render: function(parentObj) {
            var template,
                content = $.extend({}, this.contentItemData),
                contentClient = this.contentClient,
                contentType,
                secureContent = false;

            if (this.scsData) {
                content = $.extend(content, { 'scsData': this.scsData });
                contentType = content.scsData.showPublishedContent === true ? 'published' : 'draft';
                secureContent = content.scsData.secureContent;
            }

            if (contentClient) {
                var params = {
                    'itemGUID': typeof content.data.employee_profile_picture === 'string' ?
                        content.data.employee_profile_picture : content.data.employee_profile_picture.id,
                    'contentType': contentType,
                    'secureContent': secureContent
                };
                content.data.employee_profile_pictureURL = contentClient.getRenditionURL(params);
            }

            console.log(content);

            try {
                // Mustache
                template = Mustache.render(templateHtml, content);

                if (template) {
                    $(parentObj).append(template);
                }
            } catch (e) {
                console.error(e.stack);
            }
        }
    };

    return ContentLayout;
});

Подробнее о редактировании файла render.js и других файлов см. в разделе Разработка компонентов.

Импортируйте измененные файлы, чтобы заменить существующий макет контента.
1. На домашней странице нажмите Документы.
2. Измененный макет контента в файле с расширением имени .zip, который содержит экспортированные папки и файлов с теми же именами, загрузите в папку.
  Если требуется импортировать его как новый макет контента, необходимо в файле _folder.json изменить GUID макета контента.
3. На домашней странице нажмите Разработчик.
  Отображается страница Разработчик.
4. Нажмите Смотреть все компоненты.
5. В меню Создать выберите Импорт компонента.
6. Установите флажок рядом с загруженным ZIP-файлом, содержащим измененный компонент, и нажмите ОК.
Измененная компоновка контента импортируется в компоненты.

Макет контента также можно экспортировать, чтобы скопировать или переместить его в другой экземпляр Oracle Content Management и импортировать в этот экземпляр.