Inhaltslayouts mit Oracle Content Management erstellen

Erstellen Sie ein Inhaltslayout, um die Felder in einem Inhaltselement bei der Anzeige auf einer Siteseite anzuordnen. Wenn ein Inhaltselement zu einer Seite hinzugefügt wird, verwendet es das ausgewählte Inhaltslayout.

Enterprise-Benutzer können Inhaltselemente erstellen und verwenden, die auf von Entwicklern bereitgestellten Inhaltstypen und Layouts basieren. Sie können neue Inhaltslayouts auf Basis des Standardlayouts erstellen. Sind mehrere Inhaltslayouts mit dem Inhaltstyp verknüpft, kann der Sitedesigner Inhaltselemente in verschiedenen Kontexten anzeigen, ohne dass der Inhalt geändert werden muss.

Wenn Sie ein Inhaltslayout in einer Inhaltslistenkomponente verwenden, wird das Inhaltslayout einmal pro Inhaltselement wiederholt. Die Inhaltslayouts werden dann nach dem Abschnittslayout angeordnet.

Sie können ein Inhaltslayout exportieren, um es offline zu ändern, und es dann importieren, um das vorhandene Inhaltslayout zu ersetzen.

So erstellen Sie ein Inhaltslayout:

Klicken Sie auf der Homepage von Oracle Content Management in der seitlichen Navigationsleiste auf Entwickler.
Die Seite Entwickler wird angezeigt.
Klicken Sie auf Alle Komponenten anzeigen.
Wählen Sie im Dropdown-Menü rechts die Option Erstellen und anschließend Inhaltslayout erstellen aus.
Wählen Sie im Dialogfeld Inhaltslayout erstellen die Inhaltstypen aus, die das Layout verwenden werden, und wählen Sie die anzuzeigenden Felder aus. Aktivieren Sie außerdem die Option Bei Verwendung in Sites Unterstützung für benutzerdefinierte Einstellungen hinzufügen, wenn Sie es Siteerstellern ermöglichen möchten, beim Hinzufügen von Inhaltselement- und Inhaltslistenkomponenten zu einer Seite benutzerdefinierte Einstellungen und Stile hinzuzufügen.
Geben Sie einen Namen und eine Beschreibung für die Inhaltslayoutkomponente an, und klicken Sie auf Erstellen.

Das Inhaltslayout wird Ihren Komponenten hinzugefügt.

Hinweis:
In Inhaltslayouttiteln sind nur alphanumerische Zeichen, Bindestriche und Unterstriche zulässig.
Um das Inhaltslayout zur Bearbeitung zu exportieren, wählen Sie es aus, und klicken Sie im Kontextmenü auf Exportieren oder in der Aktionsleiste auf .
1. Navigieren Sie zu einem vorhandenen Ordner, oder erstellen Sie einen neuen Ordner, indem Sie Erstellen und dann Ordner auswählen und einen Namen sowie optional eine Beschreibung angeben.
2. Aktivieren Sie das Kontrollkästchen neben dem Ordner, und klicken Sie auf OK.
3. Klicken Sie auf das Symbol oder den Namen des Ordners, um ihn zu öffnen.
Eine Layoutpackagedatei wird im ausgewählten Ordner mit dem Inhaltslayoutnamen und der Erweiterung .zip erstellt. Laden Sie die Datei in Ihre Entwicklungsumgebung herunter, um die Dateien zu bearbeiten.

Diese Dateien steuern das Layout der Felder in Inhaltselementen, die das Inhaltslayout "Employee-Card" verwenden. Wenn Sie die Option Bei Verwendung in Sites Unterstützung für benutzerdefinierte Einstellungen hinzufügen aktiviert haben, wird zusätzlich eine Datei namens settings.html erstellt. Diese stellt ein Standardrendering eines einzelnen Inhaltselements bereit, damit dieses angezeigt werden kann.

Beschreibung der Abbildung GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Bearbeiten Sie die Dateien design.css, layout.html und render.js, um das gewünschte Inhaltslayout zu erstellen.

Beispiel: Die folgenden Dateien geben das Inhaltslayout "Employee-Card" an:

Bearbeiten Sie die Datei 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;
}

Bearbeiten Sie die Datei 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>

Bearbeiten Sie die Datei 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;
});

Informationen zum Bearbeiten der Datei render.js und anderer Dateien finden Sie unter Komponenten entwickeln.

Importieren Sie die geänderten Dateien, um das vorhandene Inhaltslayout zu ersetzen.
1. Klicken Sie auf der Homepage auf Dokumente.
2. Laden Sie das geänderte Inhaltslayout als ZIP-Datei mit denselben Ordner- und Dateinamen wie die ursprünglich exportierten in einen Ordner hoch.
  Wenn Sie es als neues Inhaltslayout importieren möchten, müssen Sie die GUID des Inhaltslayouts in _folder.json ändern.
3. Klicken Sie auf der Homepage auf Entwickler.
  Die Seite Entwickler wird angezeigt.
4. Klicken Sie auf Alle Komponenten anzeigen.
5. Wählen Sie im Menü Erstellen die Option Komponente importieren aus.
6. Aktivieren Sie das Kontrollkästchen neben der hochgeladenen ZIP-Datei mit der geänderten Komponente, und klicken Sie auf OK.
Das geänderte Inhaltslayout wird in Komponenten importiert.

Sie können auch Inhaltslayouts exportieren, um sie in eine andere Oracle Content Management-Instanz zu kopieren oder zu verschieben und dort zu importieren.