Oprette indholdslayouts med Oracle Content Management

Du kan oprette et indholdslayout for at arrangere felter i et indholdselement, når det vises på en siteside. Når et indholdselement føjes til en side, bruges det valgte indholdslayout.

En virksomhedsbruger kan oprette og bruge indholdselementer, der er baseret på de indholdstyper og layouts, som du stiller til rådighed som udvikler. Du kan oprette nye indholdslayouts ud fra standardlayoutet. Når der er knyttet flere indholdslayouts til indholdstypen, bliver det muligt for sitedesigneren at vise indholdselementer i forskellige kontekster uden at ændre indholdet.

Hvis du bruger et indholdslayout i en indholdslistekomponent, gentages indholdslayoutet én gang pr. indholdselement. Indholdslayoutene arrangeres derefter pr. sektionslayout.

Du kan eksportere et indholdslayout for at modificere det offline og derefter importere det for at erstatte det eksisterende indholdslayout.

Sådan opretter du et indholdslayout:

  1. Klik på Udvikler i sidenavigationen på startsiden for Oracle Oracle Content Management.
    Siden Udvikler vises.
  2. Klik på Vis alle komponenter.
  3. Vælg Opret indholdslayout i rullemenuen Opret til højre.
  4. Vælg de indholdstyper, der skal bruge layoutet, i dialogboksen Opret indholdslayout, vælg de felter, der skal vises, og aktiver Tilføj understøttelse af tilpassede indstillinger ved brug i Sites, hvis siteoprettere skal kunne tilføje tilpassede indstillinger og typografier, når de tilføjer komponenter for indholdselementer og indholdslister på en side.

    Dialogboksen Indholdslayout

  5. Indtast et navn og en beskrivelse til indholdslayoutkomponenten, og klik på Opret.

    Indholdslayoutet føjes til dine komponenter.

    Bemærk:

    Det er kun alfanumeriske tegn, bindestreger og understregningstegn, som er gyldige i indholdslayouttitler.
  6. Hvis du vil eksportere indholdslayoutet til redigering, skal du vælge det og derefter klikke på Eksporter i genvejsmenuen eller klikke på Ikonet Eksporter på handlingslinjen.
    1. Naviger til en eksisterende mappe, eller vælg Opret og derefter Mappe for at oprette en ny mappe, og indtast et navn og eventuelt en beskrivelse.
    2. Marker afkrydsningsfeltet ud for mappen, og klik på OK.
    3. Klik på mappens ikon eller navn for at åbne den.

    Der oprettes en layoutpakkefil i den valgte mappe med navnet på indholdslayoutet og filtypenavnet .zip. Download filen til dit udviklingsmiljø for at redigere filerne.

    Aktivmappe med indholdslayout

    Disse filer styrer layoutet af felterne i indholdselementer, der bruger indholdslayoutet Medarbejderkort. Hvis du har aktiveret Tilføj understøttelse af tilpassede indstillinger ved brug i Sites, oprettes også en ekstra fil med navnet settings.html, som leverer en standardgengivelse af et enkelt indholdselement, så det kan vises.


    Beskrivelse af GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png følger
    Beskrivelse af illustrationen GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png
  7. Rediger filerne design.css, layout.html og render.js for at få det ønskede indholdslayout.

    For eksempel angiver følgende filer indholdslayoutet Medarbejderkort:

    1. Rediger filen 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. Rediger filen 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. Rediger filen 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;
});

      Se Udvikling af komponenter for at få oplysninger om redigering af render.js og andre filer.

  8. Importer dine modificerede filer for at erstatte det eksisterende indholdslayout.
    1. Klik på Dokumenter på startsiden.
    2. Upload det modificerede indholdslayout til en mappe i en fil med filtypenavnet .zip, som indeholder de samme mappe- og filnavne, som du har eksporteret.
      Hvis du vil importere det som et nyt indholdslayout, skal du ændre GUID'et for indholdslayoutet i _folder.json.
    3. Klik på Udvikler på startsiden.
      Siden Udvikler vises.
    4. Klik på Vis alle komponenter.
    5. Vælg Importer komponent i menuen Opret.
    6. Marker afkrydsningsfeltet ud for den uploadede zip-fil, som indeholder den modificerede komponent, og klik på OK.

    Dit modificerede indholdslayout importeres i Komponenter.

Du kan også eksportere et indholdslayout for at kopiere eller flytte det til en anden Oracle Content Management-instans og importere det der.