Crearea machetelor de conţinut cu Oracle Content Management

Creaţi o machetă de conţinut pentru a aranja câmpurile unui element de conţinut afişat pe o pagină. Când un element de conţinut este adăugat la o pagină, acesta va utiliza macheta de conţinut selectată.

Un utilizator din companie poate crea şi utiliza anumite elemente de conţinut, în funcţie de tipurile de conţinut şi machetele pe care dvs., în calitate de dezvoltator, le furnizaţi. Puteţi crea noi machete de conţinut pe baza machetei prestabilite. Deoarece mai multe machete de conţinut sunt asociate cu tipul de conţinut, designerul de site-uri poate afişa elementele de conţinut în diferite contexte fără a trebui să modifice conţinutul.

Dacă utilizaţi o machetă de conţinut pentru o componentă de tip listă de conţinut, atunci acea machetă se repetă o dată pentru fiecare element de conţinut. Apoi, machetele de conţinut sunt aranjate de macheta de secţiuni.

Puteţi exporta o machetă de conţinut pentru a o modifica offline, apoi o puteţi importa pentru a înlocui macheta de conţinut existentă.

Pentru a crea o machetă de conţinut:

În pagina Home a soluţiei Oracle Oracle Content Management, faceţi clic pe Dezvoltator în navigarea laterală.
Este afişată pagina Dezvoltator.
Faceţi clic pe Vizualizare toate componentele.
În meniul derulant Creare din dreapta, selectaţi Creare machetă de conţinut.
În caseta de dialog Machetă creare conţinut, selectaţi tipurile de conţinut care vor utiliza macheta, alegeţi câmpurile de afişat şi activaţi Adăugare suport pt. setări personalizate când se utilizează în Site-uri Dacă doriţi ca autorii site-urilor să poată adăuga setări şi stiluri personalizate atunci când adaugă componente tip element de conţinut şi listă de componente la o pagină.
Introduceţi un nume şi o descriere pt. componenta dvs. de machetă de conţinut şi faceţi clic pe Creare.

Macheta de conţinut va fi adăugată la componentele dvs.

Notă:
În titlurile de machetă de conţinut sunt valabile doar caractere alfanumerice, cratime şi caractere de subliniere.
Pentru a exporta macheta conţinutului în vederea editării, selectaţi-o şi apoi faceţi clic pe Export din meniul contextual sau faceţi clic pe în bara de acţiuni.
1. Navigaţi la un folder existent sau selectaţi Creare, apoi Folder pt. a crea un folder nou şi introduceţi un nume şi, opţional, o descriere.
2. Bifaţi caseta de validare de lângă folder şi faceţi clic pe OK.
3. Faceţi clic pe pictograma sau pe numele folderului pentru a-l deschide.
Este creat un fişier pachet al machetei, în folderul selectat, cu numele componentei şi cu extensia .zip. Descărcaţi fişierul în mediul dvs. de dezvoltare pentru a edita fişierele.

Aceste fişiere controlează aranjarea câmpurilor din elementele de conţinut care utilizează macheta de conţinut Employee-Card (card angajat). Dacă aţi activat Adăugare suport pt. setări personalizate când se utilizează în Site-uri, atunci se creează un fişier suplimentar cu numele settings.html, care oferă o randare prestabilită a unui singur element de conţinut, pt. a putea fi afişat.

Descrierea ilustraţiei GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Editaţi fişierele design.css, layout.html şi render.js pentru a obţine macheta de conţinut dorită.

De exemplu, următoarele fişiere definesc macheta de conţinut Employee-Card (card angajat)

Editaţi fişierul 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;
}

Editaţi fişierul 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>

Editaţi fişierul 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;
});

Pentru informaţii despre editarea fişierului render.js şi a altor fişiere, consultaţi Dezvoltarea componentelor.

Importaţi fişierele modificate pentru a înlocui macheta de conţinut existentă.
1. În pagina Home, faceţi clic pe Documente.
2. Încărcaţi macheta de conţinut modificată într-un folder, sub forma unui fişier cu extensia .zip. Numele folderului şi al fişierului trebuie să corespundă cu numele elementelor exportate.
  Dacă doriţi să importaţi macheta de conţinut ca machetă de conţinut nouă, va trebui să schimbaţi identificatorul GUID al machetei de conţinut, în fişierul _folder.json.
3. În pagina Home, faceţi clic pe Dezvoltator.
  Este afişată pagina Dezvoltator.
4. Faceţi clic pe Vizualizare toate componentele.
5. Din meniul Creare, alegeţi Import componentă.
6. Bifaţi caseta de validare de lângă fişierul zip încărcat care conţine componenta modificată şi faceţi clic pe OK.
Macheta de conţinut modificată va fi importată în secţiunea Componente.

De asemenea, puteţi exporta o machetă de conţinut pentru copiere sau mutare în altă instanţă Oracle Content Management şi importare acolo.