Criar Layouts de Conteúdo com o Oracle Content Management

Crie um layout de conteúdo para desenhar os campos de um item de conteúdo quando exibido em uma página do site. Quando um item de conteúdo for adicionado a uma página, ele usará o layout de conteúdo escolhido.

Um usuário empresarial pode criar e usar itens de conteúdo com base nos tipos de conteúdo e nos layouts que você fornece como desenvolvedor. Você pode criar novos layouts de conteúdo com base no layout padrão. Vários layouts de conteúdo associados ao tipo de conteúdo permitem que o designer do site exiba itens de conteúdo em diferentes contextos sem alterar o conteúdo.

Se você usar um layout de conteúdo em um componente de lista de conteúdo, esse layout será repetido uma vez por item de conteúdo. Os layouts de conteúdo então são organizados pelo layout de seção.

Você pode exportar um layout de conteúdo para modificá-lo off-line e depois importá-lo para substituir o que já existe.

Para criar um layout de conteúdo:

  1. Na home page do Oracle Content Management, clique em Desenvolvedor na navegação lateral.
    A página Desenvolvedor é exibida.
  2. Clique em Exibir todos os Componentes.
  3. No menu drop-down Criar à direita, escolha Criar Layout de Conteúdo.
  4. Na caixa de diálogo Criar Layout de Conteúdo, selecione os tipos de conteúdo que usarão o layout, escolha os campos a serem exibidos e ative a opção Adicionar suporte para definições personalizadas quando usadas em Sites se você quiser que os criadores de sites sejam capazes de adicionar definições e estilos personalizados ao adicionar os componentes de item e lista de conteúdo a uma página.

    Caixa de diálogo Layout de Conteúdo

  5. Forneça um nome e uma descrição para o componente de layout de conteúdo e clique em Criar.

    O layout de conteúdo é adicionado aos seus componentes.

    Nota:

    Somente caracteres alfanuméricos, traços e sublinhados são válidos nos títulos de layout de conteúdo.
  6. Para exportar o layout de conteúdo para edição, selecione-o e clique em Exportar no menu acionado com o botão direito do mouse, ou clique no Ícone Exportar na barra de ações.
    1. Navegue até uma pasta existente ou selecione Criar e depois Pasta para criar uma nova pasta e forneça um nome e uma descrição, que é opcional.
    2. Marque a caixa de seleção ao lado da pasta e clique em OK.
    3. Clique no ícone ou no nome da pasta para abri-la.

    Um arquivo de pacote de layouts é criado na pasta selecionada com o nome do layout de conteúdo e uma extensão .zip. Faça download do arquivo para seu ambiente de desenvolvimento para editar os arquivos.

    Pasta de ativos do layout de conteúdo

    Esses arquivos controlam o layout dos campos em itens de conteúdo que usam o layout de conteúdo Cartão do Funcionário. Se você tiver ativado a opção Adicionar suporte para definições personalizadas quando usadas em Sites, um arquivo adicional chamado settings.html também será criado, fornecendo uma renderização padrão de um único item de conteúdo para que possa ser exibido.


    Descrição de GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png segue
    Descrição da ilustração GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png
  7. Edite os arquivos design.css, layout.html e render.js para obter o layout de conteúdo desejado.

    Por exemplo, os arquivos a seguir especificam o layout de conteúdo Cartão do Funcionário:

    1. Edite o arquivo 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;
}
    2. Edite o arquivo 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>
    3. Edite o arquivo 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 obter informações sobre a edição do arquivo render.js e de outros arquivos, consulte Desenvolver Componentes.

  8. Importe seus arquivos modificados para substituir o layout de conteúdo existente.
    1. Na home page, clique em Documentos.
    2. Faça upload do layout de conteúdo modificado para uma pasta, em um arquivo com extensão .zip, que inclua os mesmos nomes de pasta e arquivo que você exportou.
      Se quiser importá-lo como novo layout de conteúdo, altere o GUID do layout de conteúdo em _folder.json.
    3. Na home page, clique em Desenvolvedor.
      A página Desenvolvedor é exibida.
    4. Clique em Exibir todos os Componentes.
    5. No menu Criar, escolha Importar Componente.
    6. Marque a caixa de seleção ao lado do arquivo zip transferido por upload que contém o componente modificado e clique em OK.

    Seu layout de conteúdo modificado é importado para Componentes.

Você também pode exportar um layout de conteúdo para copiá-lo ou movê-lo para outra instância do Oracle Content Management e importá-lo nesse local.