สร้างเลย์เอาต์ของเนื้อหาด้วย Oracle Content Management

สร้างเลย์เอาต์ของเนื้อหาสำหรับการจัดวางฟิลด์ต่างๆ ในรายการเนื้อหาเมื่อแสดงบนเพจของไซต์ เมื่อมีการเพิ่มรายการเนื้อหาในเพจ จะมีการใช้เลย์เอาต์ของเนื้อหาที่เลือก

1. บนโฮมเพจ Oracle Oracle Content Management ให้คลิก ผู้พัฒนา ในการนาวิเกตด้านข้าง
   ระบบจะแสดงเพจ ผู้พัฒนา
2. คลิก ดูองค์ประกอบทั้งหมด
3. จากเมนูดรอปดาวน์ สร้าง ทางด้านขวา ให้เลือก สร้างเลย์เอาต์ของเนื้อหา
4. ในไดอะล็อกบ็อกซ์ สร้างเลย์เอาต์เนื้อหา เลือกประเภทเนื้อหาที่จะใช้เลย์เอาต์นี้ เลือกฟิลด์ที่จะแสดง และใช้งาน เพิ่มการรองรับสำหรับการตั้งค่าที่กำหนดเองเมื่อใช้ในไซต์ หากคุณต้องการให้ผู้สร้างไซต์สามารถเพิ่มการตั้งค่าและสไตล์ที่กำหนดเองเมื่อเพิ่มรายการเนื้อหาและองค์ประกอบลิสต์เนื้อหาลงในเพจ

   

5. ระบุชื่อและคำอธิบายสำหรับองค์ประกอบเลย์เอาต์เนื้อหาของคุณ แล้วคลิก สร้าง

   ระบบจะเพิ่มเลย์เอาต์ของเนื้อหาไปยังองค์ประกอบของคุณ

   หมายเหตุ:

   ชื่อเลย์เอาต์เนื้อหามีได้เฉพาะอักขระที่เป็นตัวอักษรและตัวเลข เครื่องหมายขีดกลาง และเครื่องหมายขีดล่าง
6. ในการเอ็กซ์ปอร์ตเลย์เอาต์ของเนื้อหาสำหรับการแก้ไข ให้เลือกเลย์เอาต์ของเนื้อหานั้น แล้วคลิก เอ็กซ์ปอร์ต ในเมนูแบบคลิกขวา หรือคลิก ในแถบการดำเนินการ
   1. นาวิเกตไปยังโฟลเดอร์ที่มีอยู่ หรือเลือก สร้าง แล้วเลือก โฟลเดอร์ เพื่อสร้างโฟลเดอร์ใหม่ และระบุชื่อ โดยสามารถเลือกระบุคำอธิบายได้ด้วย
   2. เลือกช่องทำเครื่องหมายถัดจากโฟลเดอร์ แล้วคลิก ตกลง
   3. คลิกที่ไอคอนหรือชื่อของโฟลเดอร์เพื่อเปิดโฟลเดอร์

   ระบบจะสร้างไฟล์แพ็คเกจของเลย์เอาต์ในโฟลเดอร์ที่เลือกด้วยชื่อเลย์เอาต์ของเนื้อหาและนามสกุล .zip ดาวน์โหลดไฟล์ที่ไปยังสภาพแวดล้อมการพัฒนาของคุณเพื่อแก้ไขไฟล์

   

   ไฟล์เหล่านี้จะควบคุมเลย์เอาต์ของฟิลด์ในรายการเนื้อหาที่ใช้เลย์เอาต์ของเนื้อหา "บัตรพนักงาน" หากคุณใช้งาน เพิ่มการรองรับสำหรับการตั้งค่าที่กำหนดเองเมื่อใช้ในไซต์ ระบบจะสร้างไฟล์เพิ่มเติมที่ชื่อ settings.html ด้วย ซึ่งให้การแสดงผลดีฟอลต์ของรายการเนื้อหาเดียวเพื่อให้สามารถแสดงได้

   
   
   คำอธิบายภาพ GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png
   
7. แก้ไขไฟล์ design.css, layout.html และ render.js เพื่อเรียกเลย์เอาต์ของเนื้อหาที่คุณต้องการ

   ตัวอย่างเช่น ไฟล์ต่อไปนี้จะระบุเลย์เอาต์ของเนื้อหาบัตรพนักงาน

   1. แก้ไขไฟล์ 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. แก้ไขไฟล์ 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. แก้ไขไฟล์ 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;
      });
      

      โปรดดูข้อมูลเกี่ยวกับการแก้ไขไฟล์ render.js และไฟล์อื่นๆ ที่ พัฒนาองค์ประกอบ

8. อิมปอร์ตไฟล์ที่แก้ไขของคุณเพื่อแทนที่เลย์เอาต์ของเนื้อหาที่มีอยู่
   1. บนโฮมเพจ ให้คลิก เอกสาร
   2. อัปโหลดเลย์เอาต์ของเนื้อหาที่แก้ไขไปยังโฟลเดอร์ ในไฟล์ที่มีนามสกุล .zip ซึ่งมีชื่อโฟลเดอร์และไฟล์เดียวกันกับที่คุณเอ็กซ์ปอร์ต
      หากคุณต้องการอิมปอร์ตเป็นเลย์เอาต์ของเนื้อหาใหม่ คุณต้องเปลี่ยน GUID ของเลย์เอาต์ของเนื้อหาใน _folder.json
   3. บนโฮมเพจ ให้คลิก ผู้พัฒนา
      ระบบจะแสดงเพจ ผู้พัฒนา
   4. คลิก ดูองค์ประกอบทั้งหมด
   5. จากเมนู สร้าง ให้เลือก อิมปอร์ตองค์ประกอบ
   6. เลือกช่องทำเครื่องหมายถัดจากไฟล์ซิปที่อัปโหลดซึ่งมีองค์ประกอบที่แก้ไข จากนั้นคลิก ตกลง

   ระบบจะอิมปอร์ตเลย์เอาต์ของเนื้อหาที่แก้ไขของคุณไปยัง องค์ประกอบ