Skapa innehållslayouter med Oracle Content Management

Skapa en innehållslayout för att placera ut fält i ett innehållsobjekt när de visas på en webbplatssida. När ett innehållsobjekt läggs till på en sida använder det den valda innehållslayouten.

En företagsanvändare kan skapa och använda innehållsobjekt baserat på de innehållstyper och layouter som du tillhandahåller som utvecklare. Du kan skapa nya innehållslayouter utifrån standardlayouten. När du har flera innehållslayouter associerade med innehållstypen kan du som webbplatsdesigner visa innehållsobjekt i olika kontexter utan att ändra innehållet.

Om du använder en innehållslayout i en innehållslistkomponent upprepas innehållslayouten en gång per innehållsobjekt. Innehållslayouterna ordnas då efter sektionslayouten.

Du kan exportera en innehållslayout för att ändra den offline och sedan importera den för att ersätta den befintliga innehållslayouten.

Så här skapar du en innehållslayout:

  1. På hemsidan för Oracle Oracle Content Management klickar du på Utvecklare i sidnavigeringen.
    Sidan Utvecklare visas.
  2. Klicka på Visa alla komponenter.
  3. På menyn Skapa, till höger, väljer du Skapa innehållslayout.
  4. I dialogrutan Skapa innehållslayout väljer du de innehållstyper som ska använda layouten, välj de fält som ska visas och aktivera Lägg till stöd för anpassade inställningar vid användning i Platser om du vill att webbplatsskapare ska kunna lägga till anpassade inställningar och format när innehållsobjekt- och innehållslistkomponenter läggs till på en sida.

    Dialogrutan Innehållslayout

  5. Ange ett namn och en beskrivning för innehållslayoutkomponenten och klicka på Skapa.

    Innehållslayouten läggs till i dina komponenter.

    Obs!:

    Du kan bara använda alfanumeriska tecken, bindestreck och understreck i namn på innehållslayouter.
  6. Om du vill exportera innehållslayouten för redigering ska du välja den och sedan klicka på Exportera på snabbmenyn eller klicka på Ikonen Exportera i aktivitetsfältet.
    1. Gå till en befintlig mapp eller välj Skapa och sedan Mapp för att skapa en ny mapp och ange ett namn och, valfritt, en beskrivning.
    2. Markera kryssrutan bredvid mappen och klicka på OK.
    3. Klicka på mappens ikon eller namn för att öppna den.

    En layoutpaketfil skapas i den valda mappen, med innehållslayoutnamnet och tillägget .zip. Ladda ned filen till utvecklingsmiljön för att redigera filerna.

    Mappen Tillgångar för innehållslayout

    De här filerna styr layouten för de fält i innehållsobjekt som använder innehållslayouten Medarbetarkort. Om du har aktiverat Lägg till stöd för anpassade inställningar vid användning i Platser skapas även en ytterligare fil med namnet settings.html, som ger en standardåtergivning av ett innehållsobjekt så att det kan visas.


    Beskrivning av GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png följer
    Beskrivning av illustrationen GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png
  7. Redigera filerna design.css, layout.html och render.js för att få önskad innehållslayout.

    Till exempel anger följande filer innehållslayouten Medarbetarkort:

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

      Information om hur du redigerar render.js och andra filer finns i Utveckla komponenter.

  8. Importera de ändrade filerna för att ersätta den befintliga innehållslayouten.
    1. På hemsidan klickar du på Dokument.
    2. Ladda upp den ändrade innehållslayouten till en mapp, i en fil med tillägget .zip, som inkluderar samma mapp- och filnamn som du exporterade.
      Om du vill importera den som en ny innehållslayout måste du ändra GUID för innehållslayouten i _folder.json.
    3. På hemsidan klickar du på Utvecklare.
      Sidan Utvecklare visas.
    4. Klicka på Visa alla komponenter.
    5. På menyn Skapa Väljer du Importera komponent.
    6. Markera kryssrutan bredvid den uppladdade zip-filen som innehåller den ändrade komponenten, och klicka på OK.

    Den ändrade innehållslayouten importeras till Komponenter.

Du kan även exportera en innehållslayout för att kopiera eller flytta den till en annan instans av Oracle Content Management och importera den där.