Creación de diseños de contenido con Oracle Content Management

Cree un diseño de contenido para diseñar campos en un elemento de contenido cuando se despliega en una página de sitio. Cuando se agrega un elemento de contenido a una página, este utilizará el diseño de contenido seleccionado.

Un usuario de empresa puede crear y utilizar elementos de contenido según los tipos y diseños de contenido que le proporcione como desarrollador. Puede crear nuevos diseños de contenido a partir del diseño por defecto. La asociación de varios diseños de contenido al tipo de contenido permite al diseñador del sitio mostrar elementos de contenido en diferentes contextos sin tener que cambiar el contexto.

Si utiliza un diseño de contenido en un componente de lista de contenido, se repetirá el diseño de contenido una vez por elemento de contenido. Los diseños de contenido los organiza a continuación el diseño de sección.

Puede exportar un diseño de contenido para modificarlo fuera de línea y, a continuación, importarlo para sustituir el diseño de contenido existente.

Para crear un diseño de contenido:

En la página de inicio de Oracle Content Management, haga clic en Desarrollador en la navegación lateral.
Se abrirá la página Desarrollador.
Haga clic en Ver todos los componentes.
En el menú desplegable Crear situado a la derecha, seleccione Crear diseño de contenido.
En el cuadro de diálogo Crear diseño de contenido, seleccione los tipos de contenido que se usarán en el diseño, elija los campos que se mostrarán y active la opción Agregar soporte para la configuración personalizada al usarla en sitios si desea que los creadores de sitios puedan agregar configuraciones y estilos personalizados al agregar un elemento de contenido y componentes de la lista de contenido a una página.
Proporcione un nombre y una descripción al componente de diseño de contenido y haga clic en Crear.

El diseño de contenido se agregará a sus componentes.

Nota:
Solo son válidos los caracteres alfanuméricos, guiones y los caracteres de subrayado en los títulos de diseño de contenido.
Para exportar el diseño de contenido para editarlo, selecciónelo y, a continuación, haga clic en Exportar en el menú contextual o haga clic en en la barra de acciones.
1. Vaya a una carpeta existente o seleccione Crear y, a continuación, Carpeta para crear una nueva carpeta y proporcionar un nombre y, opcionalmente, una descripción.
2. Active la casilla de control que aparece junto a la carpeta y haga clic en Aceptar.
3. Haga clic en el icono o en el nombre de la carpeta para abrirla.
Se creará un archivo de paquete de diseño en la carpeta seleccionada con el nombre del diseño de contenido y la extensión .zip. Descargue el archivo a su entorno de desarrollo para editar los archivos.

Estos archivos controlan el diseño de los campos en los elementos de contenido que utilizan el diseño de contenido Employee-Card. Si ha activado Agregar soporte para la configuración personalizada al usarla en sitios, también se crea un archivo adicional denominado settings.html, que proporciona una representación por defecto de un solo elemento de contenido para que lo pueda mostrar.

Descripción de la ilustración GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Edite los archivos design.css, layout.html y render.js para obtener el diseño de contenido que desee.

Por ejemplo, en los siguientes archivos, especifique el diseño de contenido Employee-Card:

Edite el archivo 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;
}

Edite el archivo 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>

Edite el archivo 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;
});

Para obtener información sobre la edición de render.js y otros archivos, consulte Desarrollo de componentes.

Importe los archivos modificados para sustituir el diseño de contenido existente.
1. En la página inicial, haga clic en Documentos.
2. Cargue el diseño de contenido modificado en una carpeta, en un archivo con la extensión .zip, que incluya los mismos nombres de carpeta y archivos que ha exportado.
  Si desea importarlo como un nuevo diseño de contenido, debe cambiar el GUID del diseño de contenido en _folder.json.
3. En la página inicial, haga clic en Desarrollador.
  Se abrirá la página Desarrollador.
4. Haga clic en Ver todos los componentes.
5. En el menú Crear, seleccione Importar componente.
6. Seleccione la casilla de control situada junto al archivo ZIP cargado que contiene el componente modificado y haga clic en Aceptar.
El diseño de contenido modificado se importará a Componentes.

También puede exportar un diseño de contenido para copiarlo o moverlo a otra instancia de Oracle Content Management e importarlo allí.