Vytvorenie rozložení obsahu pomocou služby Oracle Content Management

Po vytvorení rozloženia obsahu môžete rozložiť polia v obsahovej položke pri zobrazení na stránke lokality. Keď na stránku pridáte obsahovú položku, použije vybraté rozloženie obsahu.

Podnikový používateľ môže vytvárať a používať obsahové položky na základe typov obsahu a rozložení, ktoré poskytnete ako vývojár. Nové rozloženia obsahu môžete vytvoriť z predvoleného rozloženia. Priradením viacerých rozložení obsahu k danému typu obsahu získava návrhár lokality možnosť zobrazovať obsahové položky v rôznych kontextoch bez nutnosti meniť obsah.

Ak použijete rozloženie obsahu v komponente zoznamu obsahu, rozloženie obsahu sa opakuje raz pre každú obsahovú položku. Rozloženia obsahu sú usporiadané podľa rozloženia sekcie.

Rozloženie obsahu môžete exportovať a modifikovať offline a potom ho môžete importovať a nahradiť ním existujúce rozloženie obsahu.

Ako vytvoriť rozloženie obsahu:

Na domovskej stránke služby Oracle Content Management kliknite na položku Vývojár na bočnom navigačnom paneli.
Zobrazí sa stránka Vývojár.
Kliknite na položku Zobraziť všetky komponenty.
V rozbaľovacej ponuke Vytvoriť na pravej strane vyberte položku Vytvoriť rozloženie obsahu.
V dialógovom okne Vytvoriť rozloženie obsahu vyberte typy obsahu, ktoré budú používať rozloženie, a vyberte polia na zobrazenie. Ak chcete, aby tvorcovia lokalít mohli pri pridávaní komponentov obsahových položiek a zoznamu obsahu na stránku pridávať vlastné nastavenia a štýly, aktivujte voľbu Pridať podporu vlastných nastavení pri použití na lokalitách.
Zadajte názov a popis pre komponent rozloženia obsahu a kliknite na položku Vytvoriť.

Rozloženie obsahu sa pridá do komponentov.

Poznámka:
V názve rozloženia obsahu možno ako platné znaky použiť len alfanumerické znaky, spojovníky a znaky podčiarknutia.
Ak chcete exportovať rozloženie obsahu kvôli úprave, vyberte ho a v kontextovej ponuke kliknite na položku Exportovať alebo kliknite na ikonu na paneli akcií.
1. Prejdite do existujúceho priečinka alebo vytvorte nový priečinok tak, že vyberiete položku Vytvoriť, potom položku Priečinok a potom zadáte názov a voliteľný popis.
2. Začiarknite políčko vedľa priečinka a kliknite na tlačidlo OK.
3. Kliknutím na ikonu alebo názov priečinka ho otvoríte.
Vo vybranom priečinku sa vytvorí súbor balíka rozloženia s názvom rozloženia obsahu a príponou .zip. Stiahnite si súbor do vývojového prostredia, kde môžete súbory upravovať.

Tieto súbory určujú rozloženie polí v obsahových položkách, ktoré používajú rozloženie obsahu karty zamestnanca. Ak ste aktivovali funkciu Pridať podporu vlastných nastavení pri použití na lokalitách, vytvorí sa ďalší súbor s názvom settings.html, ktorý poskytuje predvolené vykreslenie jednej obsahovej položky, aby ju bolo možné zobraziť.

Popis obrázka GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Upravte súbory design.css, layout.html a render.js, aby ste dosiahli požadované rozloženie obsahu.

Nasledujúce súbory napríklad určujú rozloženie obsahu karty zamestnanca:

Upravte súbor 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 súbor 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 súbor 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;
});

Informácie o úprave súboru render.js a ďalších súborov nájdete v časti Vývoj komponentov.

Importujte modifikované súbory a nahraďte nimi existujúce rozloženie obsahu.
1. Na domovskej stránke kliknite na položku Dokumenty.
2. Nahrajte modifikované rozloženie obsahu v súbore s príponou .zip do priečinka s rovnakými názvami priečinka a súborov, ako boli exportované.
  Ak ho chcete importovať ako nové rozloženie obsahu, zmeňte identifikátor GUID rozloženia obsahu v súbore _folder.json.
3. Na domovskej stránke kliknite na položku Vývojár.
  Zobrazí sa stránka Vývojár.
4. Kliknite na položku Zobraziť všetky komponenty.
5. V ponuke Vytvoriť vyberte položku Importovať komponent.
6. Začiarknite políčko vedľa nahraného súboru zip, ktorý obsahuje modifikovaný komponent, a kliknite na tlačidlo OK.
Modifikované rozloženie obsahu sa importuje do priečinka Komponenty.

Rozloženie obsahu tiež môžete exportovať a skopírovať alebo presunúť do inej inštancie služby Oracle Content Management a importovať ho tam.