Vytvořte další rozvržení s Oracle Content Management

Vytvořte rozvržení obsahu pro rozmístění polí v položce obsahu, když se zobrazí na stránce webu. Když je na stránku přidána položka obsahu, použije zvolené rozvržení obsahu.

Podnikový uživatel může vytvářet a používat položky obsahu založené na typech a rozvrženích obsahu, které poskytnete jako vývojář. Z výchozího rozvržení můžete vytvářet nová rozvržení obsahu. Více rozvržení obsahu přiřazených k typu obsahu umožňuje návrháři webu zobrazovat položky obsahu v různých kontextech bez změny obsahu.

Pokud použijete rozvržení obsahu v komponentě seznamu obsahu, rozvržení obsahu se jednou zopakuje pro každou položku obsahu. Rozvržení obsahu jsou poté uspořádána podle rozvržení sekce.

Rozvržení obsahu můžete exportovat k provedení úprav offline a následně importovat jako náhradu za stávající rozvržení obsahu.

Postup vytvoření rozvržení obsahu:

Klikněte v postranní navigaci na volbu Vývojář na domovské stránce služby Oracle Oracle Content Management.
Zobrazí se stránka Vývojář.
Klikněte na položku Zobrazit všechny komponenty.
V rozevírací nabídce Vytvořit na pravé straně vyberte volbu Vytvořit rozvržení obsahu.
V dialogovém okně Vytvořit rozvržení obsahu vyberte typy obsahu, které budou používat dané rozvržení, zvolte pole, která se zobrazí, a aktivujte volbu Přidat podporu pro vlastní nastavení při použití na webech, pokud chcete, aby tvůrci webů mohli přidávat vlastní nastavení a styly při přidávání položky obsahu a komponent seznamu obsahu na stránku.
Zadejte název a popis pro komponentu rozvržení obsahu a klikněte na tlačítko Vytvořit.

Rozvržení obsahu bude přidáno ke komponentám.

Poznámka:
V názvech rozvržení obsahu je povoleno používat pouze alfanumerické znaky, spojovníky a podtržítka.
Chcete-li exportovat rozvržení obsahu k provedení úprav, vyberte jej a poté klikněte na položku Exportovat v místní nabídce nebo klikněte na ikonu v pruhu akcí.
1. Přejděte do existující složky nebo výběrem položek Vytvořit a Složka vytvořte novou složku a zadejte název a nepovinně popis.
2. Zaškrtněte políčko vedle složky a klikněte na tlačítko OK.
3. Kliknutím na ikonu nebo název složky otevřete požadovanou složku.
Soubor balíčku rozvržení se vytvoří ve vybrané složce, a to s názvem rozvržení obsahu a příponou .zip. Stáhněte soubor do vývojového prostředí a upravte soubory, které obsahuje.

Tyto soubory řídí rozmístění polí v položkách obsahu, které používají rozvržení obsahu karty zaměstnance. Pokud jste aktivovali volbu Přidat podporu pro vlastní nastavení při použití na webech, vytvoří se také další soubor s názvem settings.html, který poskytuje výchozí generování jedné položky obsahu, aby mohla být zobrazena.

Popis ilustrace ''GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png''

Upravte soubory design.css, layout.html a render.js tak, abyste získali požadované rozvržení obsahu.

Například následující soubory specifikují rozvržení obsahu karty zaměstnance:

Upravte soubor 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;
}

Upravte soubor 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>

Upravte soubor 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;
});

Informace o úpravách souboru render.js a dalších souborů naleznete v tématu Vývoj komponent.

Importujte upravené soubory, a nahraďte tak stávající rozvržení obsahu.
1. Na domovské stránce klikněte na položku Dokumenty.
2. Odešlete upravené rozvržení obsahu do složky v souboru s příponou .zip, který obsahuje stejnou složku a soubory se stejnými názvy, které jste exportovali.
  Pokud je chcete importovat jako nové rozvržení obsahu, musíte změnit identifikátor GUID rozvržení obsahu v souboru _folder.json.
3. Na domovské stránce klikněte na položku Vývojář.
  Zobrazí se stránka Vývojář.
4. Klikněte na položku Zobrazit všechny komponenty.
5. V nabídce Vytvořit zvolte položku Importovat komponentu.
6. Zaškrtněte políčko vedle odeslaného souboru zip, který obsahuje upravenou komponentu, a klikněte na tlačítko OK.
Upravené rozvržení obsahu bude importováno mezi komponenty.

Můžete také rozvržení obsahu exportovat nebo jej zkopírovat a poté jej provedením importu přesunout do jiné instance služby Oracle Content Management.