Download
1 / 33
340 likes | 683 Views
TRS WCM V6.0 模板制作. 北京拓尔思信息技术股份有限公司. 内容提要. 一、 TRSWCM 概述、模板的作用概述 二、 TRSWCM 模板置标 三、 WCM 内模板管理和模板编辑方法 四、 Dreamweaver 模板编辑插件和模板制作方法 五、常见应用示例模板代码. 第一章：概述 WCM 及模板. 数据库服务器，比如 Oracle，SQLServer 等存储网站数据。. 内容协作平台服务器( WCM). 数据存储过程. 数据发布过程. 发布出 静态网页. 网站管理、维护人员通过浏览器访问内容管理平台，进行系统和数据的管理. 网站的最终用户.
E N D
TRS WCM V6.0模板制作 北京拓尔思信息技术股份有限公司
内容提要 • 一、TRSWCM概述、模板的作用概述 • 二、TRSWCM模板置标 • 三、WCM内模板管理和模板编辑方法 • 四、Dreamweaver模板编辑插件和模板制作方法 • 五、常见应用示例模板代码
数据库服务器，比如Oracle，SQLServer等存储网站数据。数据库服务器，比如Oracle，SQLServer等存储网站数据。 内容协作平台服务器(WCM) 数据存储过程 数据发布过程 发布出 静态网页 网站管理、维护人员通过浏览器访问内容管理平台，进行系统和数据的管理 网站的最终用户 Web Server WCM工作原理
5，网站发布 Web Content Management，WCM 站点 结构 规划 1，创建站点 2，创建频道（多层频道树） 创建频道 3，创建模板(包括概览模板、细览模板），并使用到频道上 内容； 风格； 栏目； 页面； 4，网站数据采集、编审 网站建设流程
模板 模板的作用 负责页面的显示风格和显示内容 模板的组成 模板由HTML置标和TRS置标组成。（含有TRS置标的HTML文件） HTML决定页面风格；TRS置标决定页面显示内容； 模板的类型 概览模板：主页模板和各栏目的概览模板 细览模板：各栏目的细览模板 嵌套模板：可嵌套的通用模板
模板发布原理－数据＋模板 单篇发布 频道发布
模板和页面 频道文档列表
频道数据、模板、页面的关系 频道 频道 频道 频道 发布 频道 访问用户 频道 模板 Html页 频道
置标种类 TRS_DOCUMENTS: 文档列表 TRS_RELNEWS: 相关新闻列表 TRS_CHANNELS: 频道列表 TRS_RECORD： 分组显示 概览置标 • TRS_DOCUMENT: 文档详细信息（标题、作者、正文、图片…） • TRS_CHANNEL: 频道详细信息 • TRS_APPENDIX: 文档附件 • TRS_CURPAGE: 当前位置 • TRS_REPLACE: 替换内容 • TRS_DATETIME: 发布时间 细览置标 • TRS_TEMPLATE： 嵌套模板
TRS_ROLLDOCUMENTS：滚动新闻列表 TRS_NEWICON：显示最新新闻标志 TRS_CONDDITION：条件置标 TRS_ECHO：在当前置标位置输出指定内容 TRS_VARIABLE：变量声明 TRS_ENUM：声明变量枚举值 特殊应用置标
频道列表： 每个频道，都需配置概览和细览模板才允许被发布。
TRS置标说明 TRS置标说明 置标的主要作用是控制数据在模板中的表现形式，将数据与表现分开。主要思路是TRS置标处理数据的内容，存放的位置以及如何存放等，数据的表现形式则由标准的html语言描述，例如： <FONT COLOR=RED> <TRS_DOCUMENT FIELD=”DOCTITLE”>这里放置文档标题</TRS_DOCUMENT> </FONT> 其中：红色是TRS置标，蓝色部分是标准的HTML置标。TRS置标表明要在该位置放置字段名为“标题”的字段内容。
WCM内模板管理 选站点或栏目 模板列表，可分类显示 模板操作 配置模板。 需发布的站点、栏目必须配置模板和存放位置 选模板分类
新建模板 输入名称，选择类型（必须） 利用置标向导生成置标代码，粘帖到鼠标位置
导出、导入模板 导出成ZIP文件。将模板html文件、图片、js等同步导出。 支持导入html、zip等格式。 如模板中有图片需要导入，需将模板html文件和图片css等文件夹一起打包成zip文件，然后导入。
模板校验语法错误（1） 模板保存时，WCM将自动校验置标书写语法，如有错误，将显示提示。
模板校验语法错误（2） 在模板列表界面，可批量校验选中的模板
同步模板附件 模板图片存放在WCM服务器目录/wcmdata/template/里面。当站点或栏目预览或发布后，模板图片、js文件、css文件等将自动分发到/wcmdata/preview或/wcmdata/pub/下面。 同步模板附件，由手工确保这种附件的分发。
模板配置到栏目 选择栏目后，可以在栏目信息页面直接配置。
插件登录WCM 登录用户：同登录WCM的用户和密码 服务器地址：http://192.9.200.200:8080/wcm/services/trs:templateservicefacade 注意：需要将其中的192.9.200.200:8080/wcm替换成实际使用的WCM访问地址 点此按钮，进行离线编辑
制作模板过程 1,设置本地站点和WCM站点对应关系 2,创建、编辑模板 3,上传模板
图片新闻-图片切换显示 <table> <script language='JavaScript'> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; var kk = 1; var filepath_liucp=""; <TRS_DOCUMENTS NUM="5" ID="图片"> filepath_liucp='<TRS_recpath></trs_recpath>'; filepath_liucp = filepath_liucp.substring(0,filepath_liucp.lastIndexOf("/")+1); imgUrl[kk] =filepath_liucp + '<TRS_APPENDIX INDEX="0" MODE="PIC" FIELD="APPFILE"></TRS_APPENDIX>'; imgLink[kk] = '<trs_recpath></trs_recpath>'; imgTz[kk] = '<a href="<TRS_recpath></trs_recpath>" target="_blank"><font color=#CC0000><TRS_DOCUMENT AUTOLINK="false" FIELD="doctitle" NUM="42"></TRS_DOCUMENT></font></a>'; kk++; </TRS_DOCUMENTS> kk--; var imgPre=new Array(); var j=0; for (i=1;i<=5;i++) { if( (imgUrl[i]!="") && (imgLink[i]!="") ) { j++; } else { break; } } function playTran(){ if (document.all) imgInit.filters.revealTrans.play(); } • 替换其中置标的频道名称即可： <TRS_DOCUMENTS NUM="5" ID="图片">
var key=0; function nextAd(){ if(adNum<j)adNum++ ; else adNum=1; if( key==0 ){ key=1; } else if (document.all){ imgInit.filters.revealTrans.Transition=6; /* transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式。 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除。 8 : 纵向百叶窗转换。 9 : 横向百叶窗转换。 10 : 国际象棋棋盘横向转换。 11 : 国际象棋棋盘纵向转换。 12 : 随机杂点干扰转换。 13 : 左右关门效果转换。 14 : 左右开门效果转换。 15 : 上下关门效果转换。 16 : 上下开门效果转换。 17 : 从右上角到左下角的锯齿边覆盖效果转换。 18 : 从右下角到左上角的锯齿边覆盖效果转换。 19 : 从左上角到右下角的锯齿边覆盖效果转换。 20 : 从左下角到右上角的锯齿边覆盖效果转换。 21 : 随机横线条转换。 22 : 随机竖线条转换。 23 : 随机使用上面可能的值转换。 */ imgInit.filters.revealTrans.apply(); playTran(); } document.images.imgInit.src=imgUrl[adNum]; document.getElementById('tpxw').innerHTML='<a href="' + imgLink[adNum] + '" target="_blank">' + imgTz[adNum] + '</a>'; theTimer=setTimeout("nextAd()", 6000); //转换间隔时间 } 图片新闻-图片切换显示
function goUrl(){ jumpUrl=imgLink[adNum]; jumpTarget='_blank'; if (jumpUrl != ''){ if (jumpTarget != '') window.open(jumpUrl,jumpTarget); else location.href=jumpUrl; } } </script> <tr class="14txt22"> <td bgcolor="#F0F0E8"><a href="javascript:goUrl()"><img style='FILTER: revealTrans(duration=2,transition=1)' src='javascript:nextAd()' border='0' width='243' height='168' class='img01' name='imgInit'></a></td> </tr> <tr> <td class="14txt22"><center><font color="#CC0000"><span id='tpxw'>标题</span></font></center></td> </tr> </table> 图片新闻-图片切换显示
代码： 概览分页 内容显示： <!--循环开始--> <TRS_DOCUMENTS NUM="500" PAGESIZE="4" AUTOMORE="FALSE"> <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0"> <tr> <td>·<TRS_DOCUMENT FIELD="DOCTITLE" EXTRA="class='10ptb'" TARGET="_blank"> 标题放于此处 </TRS_DOCUMENT><font style='color:#ADADAD'>[<TRS_DOCUMENT FIELD="DOCRELTIME" EXTRA="class='10ptb' style='color:#ADADAD'" DATEFORMAT="yyyy/MM/dd"> 标题放于此处 </TRS_DOCUMENT>]</font></td> </tr> </table> </TRS_DOCUMENTS> <!--循环结束--> 分页脚本script： <SCRIPT LANGUAGE="JavaScript"> //createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}"); var currentPage = ${PAGE_INDEX};//所在页从0开始 //var headPage = "${PAGE_NAME}"+"."+"${PAGE_EXT}";//首页 //var tailPage = "${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}"//尾页 var prevPage = currentPage-1//上一页 var nextPage = currentPage+1//下一页 var countPage = ${PAGE_COUNT}//共多少页 document.write("共"+countPage+"页 "); //设置上一页代码 if(countPage>1&¤tPage!=0&¤tPage!=1) document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页</a> <a href=\"${PAGE_NAME}"+"_" + prevPage + "."+"${PAGE_EXT}\">上一页</a> "); else if(countPage>1&¤tPage!=0&¤tPage==1) document.write("<a href=\"${PAGE_NAME}.${PAGE_EXT}\">首页</a> <a href=\"${PAGE_NAME}.${PAGE_EXT}\">上一页</a> "); else document.write("首页 上一页 ");
概览分页 //循环 var num = 5; for(var i=0+(currentPage-1-(currentPage-1)%num) ; i<=(num+(currentPage-1-(currentPage-1)%num))&&(i<countPage) ; i++){ if(currentPage==i) document.write((i+1)+" "); else if(i==0){ document.write("<a href=\"${PAGE_NAME}"+"."+"${PAGE_EXT}\">"+1+"</a> ");} else document.write("<a href=\"${PAGE_NAME}"+"_" + i + "."+"${PAGE_EXT}\">"+(i+1)+"</a> "); } //设置下一页代码 if(countPage>1&¤tPage!=(countPage-1)) document.write("<a href=\"${PAGE_NAME}"+"_" + nextPage + "."+"${PAGE_EXT}\">下一页</a> <a href=\"${PAGE_NAME}_" + (countPage-1) + ".${PAGE_EXT}\">尾页</a> "); else document.write("下一页 尾页 "); //跳转页面 document.write("<font class='9ptb'>转到第<input type='text' id='num' value="+(currentPage+1)+" style='width:30px'>页"+ " <input type='submit' value='提交' onClick=javacript:toPage()></font>"); function toPage(){ var _num = document.getElementById("num").value; var str = "${PAGE_NAME}"+"_"+(_num-1)+"."+"${PAGE_EXT}"; var url = location.href.substring(0,location.href.lastIndexOf("/")+1); if(_num<=1||_num==null) location.href = url+"${PAGE_NAME}"+"."+"${PAGE_EXT}"; else if(_num>countPage) alert("本频道最多"+countPage+"页"); else location.href = url+str; } </SCRIPT>
文章内容分页 文章内容分页需要两处设置： 1，采编文章时，在需要分页处插入分页符 2，细览模板中写入分页代码
文章内容分页 将以下代码拷贝到细览模板的需要放置分页页码处： <SCRIPT LANGUAGE="JavaScript"> <!-- function createPageHTML(_nPageCount, _nCurrIndex, _sPageName, _sPageExt){ if(_nPageCount == null || _nPageCount<=1){ return; } var nCurrIndex = _nCurrIndex || 0; if(nCurrIndex == 0) document.write("1 "); else document.write("<a href=\""+_sPageName+"."+_sPageExt+"\">1</a> "); for(var i=1; i<_nPageCount; i++){ if(nCurrIndex == i) document.write((i+1) + " "); else document.write("<a href=\""+_sPageName+"_" + i + "."+_sPageExt+"\">"+(i+1)+"</a> "); } } //WCM置标 createPageHTML(${PAGE_COUNT}, ${PAGE_INDEX}, "${PAGE_NAME}", "${PAGE_EXT}"); //--> </SCRIPT>
