Tartalomelrendezések létrehozása az Oracle Content Management szolgáltatással

Hozzon létre egy tartalomelrendezést, amellyel elrendezheti a mezőket egy tartalomelemben egy webhelyoldalon történő megjelenítésük során. Ha egy tartalomelemet adnak egy oldalhoz, az a kiválasztott tartalomelrendezést fogja használni.

1. Az Oracle Content Management kezdőlapján kattintson az oldalsó navigációs menün a Fejlesztő elemre.
   Megnyílik a Fejlesztő oldal.
2. Kattintson az Összes összetevő megtekintése elemre.
3. A jobb oldalon található Létrehozás lenyíló menüből válassza ki a Tartalomelrendezés létrehozása lehetőséget.
4. A Tartalomelrendezés létrehozása párbeszédpanelen jelölje ki azokat a tartalomtípusokat, amelyeket használni fog az elrendezés, válassza ki a megjelenítendő mezőket, és engedélyezze a Támogatás biztosítása a webhelyeken használt egyéni beállításokhoz lehetőséget, ha azt szeretné, hogy a webhelyek létrehozói a tartalomelem és a tartalomlista összetevőinek az oldalra való felvételekor képesek legyenek megadni egyéni beállításokat és stílusokat is.

   

5. Adjon nevet és leírást a létrehozott tartalomelrendezési összetevő részére, majd kattintson a Létrehozás gombra.

   A tartalomelrendezés hozzáadódik az összetevőkhöz.

   Megjegyzés:

   A tartalomelrendezések címében csak az alfanumerikus karakterek, a kötőjel és az aláhúzás-karakter használata megengedett.
6. Ha tartalomelrendezést szeretne exportálni szerkesztéshez, jelölje ki, majd a helyi menüben kattintson az Exportálás elemre, vagy a műveletsávon kattintson az ikonra.
   1. Lépjen egy meglévő mappához, vagy új mappa létrehozásához kattintson a Létrehozás gombra, utána a Mappa elemre, majd adja meg a mappa nevét és igény szerint a leírását.
   2. Jelölje be a mappa melletti négyzetet, majd kattintson az OK gombra.
   3. A mappa megnyitásához kattintson az ikonjára vagy a nevére.

   Az elrendezés csomagfájlja a kijelölt mappában a tartalomelrendezés nevével és egy .zip kiterjesztéssel jön létre. Töltse le a fájlt a fejlesztési környezetbe, hogy szerkeszthesse a fájlokat.

   

   Ezek a fájlok szabályozzák az Alkalmazotti kártya tartalomelrendezését használó tartalomelemekben lévő mezők elrendezését. Ha engedélyezte a Támogatás biztosítása a webhelyeken használt egyéni beállításokhoz lehetőséget, akkor létrejön az a további, settings.html nevű fájl is, amelyik az alapértelmezett renderelést szolgáltatja, hogy megjelenhessen az egyetlen tartalomelem.

   
   
   A(z) GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png ábra leírása
   
7. A kívánt tartalomelrendezés kialakításához szerkessze a design.css, a layout.html és a render.js fájlt.

   Például a következő fájlok határozzák meg az Alkalmazotti kártya tartalomelrendezését:

   1. Szerkessze a design.css fájlt:

      .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. Szerkessze a layout.html fájlt:

      {{#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. Szerkessze a render.js fájlt:

      /* 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;
      });
      

      A render.js és más fájlok szerkesztésével kapcsolatos további tudnivalókat lásd: Összetevők fejlesztése.

8. Importálja a módosított fájlokat a meglévő tartalomelrendezés kicserélésére.
   1. A kezdőlapon kattintson a Dokumentumok elemre.
   2. Töltse fel a módosított tartalomelrendezést egy mappába, egy .zip kiterjesztésű fájlban, amely ugyanazokat a mappa- és fájlneveket tartalmazza, mint amelyeket exportált.
      Ha új tartalomelrendezésként szeretné importálni, módosítania kell a tartalomelrendezés GUID azonosítóját a _folder.json fájlban.
   3. A kezdőlapon kattintson a Fejlesztő elemre.
      Megnyílik a Fejlesztő oldal.
   4. Kattintson az Összes összetevő megtekintése elemre.
   5. A Létrehozás menüből válassza az Összetevő importálása elemet.
   6. Jelölje be a módosított összetevőt tartalmazó, feltöltött .zip fájl melletti négyzetet, majd kattintson az OK gombra.

   A módosított tartalomelrendezés importálódik az Összetevők mappába.