创建 HTML 组件

可以在 Oracle Content Management 组件目录中创建新的本地组件，然后通过在其 assets 文件夹中添加和更改文件来构建 HTML 组件。

1. 创建组件并将其命名为 HTML Component。
   请参见创建新的本地组件。
2. 将 mustache.min.js 文件添加到 HTML 组件的 assets 文件夹。
3. 在 assets 文件夹中创建名为 render.html 的新文件，其包含组件正文的 HTML。对于此示例，使用以下内容创建 render.html 文件：

   <ul class="wrapper">
       <li class="box">
        <h1 class="title">One</h1>
      <p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
       <li class="box"> 
        <h1 class="title">Two</h1>
        <p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
     <li class="box"> 
        <h1 class="title">Three</h1>
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p> 
       </li>
     <li class="box">
        <h1 class="title">Four</h1> 
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
   </ul>

4. 在 assets 文件夹中创建名为 design.css 的新文件，其是组件的 CSS。对于此示例，添加以下行作为 design.css 文件的内容：

   .wrapper {
     text-align: center;
   }
   .box {
     display: inline-block;
     position: relative;
     width: 200px;
     height: 200px;
     padding:0px 10px 10px 10px;
     background: transparent;
     border-width:1px;
     border-style:solid;
     border-radius: 5px;
     border-color:#CCCCCC;
     z-index: 0;
     margin: 2px 2px 2px 2px;
     transition: all .15s ease-in-out;
   }
   .box:hover {
     background: #9CC;
     z-index: 100;
     transform: scale(1.2,1.2);
     box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
   }
   .title {
      color:red;
   }
   .text {
      color:#555555;
   }

5. 打开 assets 文件夹中的 render.js 文件，并将内容更改为以下内容。无论您在前面步骤中使用了什么 HTML 和 CSS，以下 render.js 文件都会为您将 HTML 和 CSS 呈现到页中：

   /* globals define */
   define(['jquery', './mustache.min', 'text!./render.html', 'css!./design.css'], function($, Mustache, template, css) {
     'use strict';
   
     // ----------------------------------------------
     // Create a Mustache-based component implemention
     // ----------------------------------------------
     var SampleComponentImpl = function(args) {
       this.SitesSDK = args.SitesSDK;
   
       // Initialze the custom component
       this.createTemplate(args);
       this.setupCallbacks();
     };
     // create the template based on the initial values
     SampleComponentImpl.prototype.createTemplate = function(args) {
       // create a unique ID for the div to add, this will be passed to the callback
       this.contentId = args.id + '_content_' + args.viewMode;
       // create a hidden custom component template that can be added to the DOM 
       this.template = '<div id="' + this.contentid + '">' +
         template +
         '</div>';
     };
     SampleComponentImpl.prototype.updateSettings = function(settings) {
       if (settings.property === 'customSettingsData') {
           this.update(settings.value);
       }
     };
     SampleComponentImpl.prototype.update = function(data) {
       this.data = data;
       this.container.html(Mustache.to_html(this.template, this.data));
     };
     //
     // SDK Callbacks
     // setup the callbacks expected by the SDK API
     //
     SampleComponentImpl.prototype.setupCallbacks = function() {
       //
       // callback - render: add the component into the page
       //
       this.render = $.proxy(function(container) {
          this.container = $(container);
          this.SitesSDK.getProperty('customSettingsData', $.proxy(this.update, this));
       }, this);
       //
       // callback - SETTINGS_UPDATED: retrive new custom data and re-render the component
       //
       this.SitesSDK.subscribe(this.SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this));
       //
       // callback - dispose: cleanup after component when it is removed from the page
       //
       this.dispose = $.proxy(function() {
          // nothing required
       }, this);
     };
     // ----------------------------------------------
     // Create the factory object for your component
     // ----------------------------------------------
     var sampleComponentFactory = {
       createComponent: function(args, callback) {
         // return a new instance of the component
         return callback(new SampleComponentImpl(args));
       }
     };
     return sampleComponentFactory;
   });