快速专题系统

cms

自定义模板

示例

关键点解释：
1. class命名空间，防止命名冲突。
2. 必需，默认即可。
3. 非必需，表明当前模块为子模块。
4. 非必需，表明当前模块可拖拽。如果一个模块包含child=true和draggable=true，此模块只能在父模块内拖拽。
5. 非必需，存储模板信息，JSON格式。如果包含此属性，表示点击此模块会弹出对话框，要求填入内容。如果不需要更改类似于topicid等信息，则可不加此属性。
6. 数据绑定，跟⑤配合使用。
7. 必需，以便后续可删除此模块。
8. 可用此标签作为占位符，方便在cms中操作，注意element的innerHTML为空。
9. 实际的vm存放处。可以⑧配合使用，加上类cms-hide以便在cms中隐藏。
10. 此为VM的注释，隐藏部分cms信息，#* blablabla *#中间的内容在生成专题时会隐藏。

注意事项

1. 所有的自定义模块不会保存。
2. 命名约定，自定义模块所有的类置于.ntes-custom下。
3. 一些工具方法，见下方。
4. 较重要的两个css类。cms-hide 在cms中隐藏此元素，对应ntes-hide在实际生成的页面中隐藏此元素。
5. 页面包含了 NTES（$）和jQuery($j)。
6. 尽量不要引入外部的css和js，由于cms在https下，导致预览时外部http下的静态资源无法加载。

HTML模板

<!-- Velocity模板，可以使用cms中的工具方法 -->
<div 
  class="ntes-custom" 
  #* 
    ntes-module="custom" 
    child=true 
    draggable=true 
    ntes-module-model='{"topicid":"123123","listnum":4, "title":"栏目标题"}' 
  *# >
  <span class="ntes-hide btn cms-btn" ng-click="delModule()">删除</span>
  <style></style>
  <div class="title">{{title}}</div>
  <div class="content" #* contenteditable *# >这里是内容</div>
  <div class="cms-custom-mask"></div>
  <div class="clearfix cms-hide">
    #set ($list=$tag.getList("topicid={{topicid}};listnum={{listnum}};titlelength=10;pointstart=60;pointend=90;")) 
    #if ($list) #foreach ($one in $list)
    #set ($til = ${tools.replaceAll($tools.stripTags([标题]),"\"","＂")})
    <div class="item #if($velocityCount%2== 0)last#end">
      <a href="$one.get('url')" target="_blank">
        <img src="$one.get('imgsrc')" width=130 height=90 />
        <span>[标题]</span>
      </a>
    </div>
    #end#end
  </div>
  <script></script>
</div>

CSS工具方法

页面中已提供的工具方法。

.center-block{
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.clearfix{
  *zoom:1;
  &:after{
    clear:both; 
    height:0; 
    overflow:hidden; 
    display:block; 
    visibility:hidden; 
    content:"."; 
  }
}
.ntes-left{
  float: left;
}
.ntes-right{
  float: right;
}